Ви запускаєте дашборд для аналітики продажів, і кожна фільтрація викликає перезавантаження сторінки. Користувачі втрачають контекст, а ви втрачаєте час. Замість SSR з його серверними витратами ми використовуємо CSR (Client-Side Rendering): браузер сам будує інтерфейс, сервер віддає тільки скелет і скрипти. За 10+ років ми реалізували понад 50 таких проєктів для логістики, fintech та e-commerce. Наприклад, для однієї транспортної компанії ми скоротили час до взаємодії (TTI) з 8 до 2.5 секунд, перевівши CRM на CSR з React і TanStack Router. Це архітектура SPA, ідеальна для закритих додатків: дашборди, кабінети, інструменти. Гарантуємо чуйний інтерфейс з локальним станом, навіть на слабкому залізі.
Зв'яжіться з нами для консультації щодо вибору архітектури.
Коли CSR краще SSR?
| Критерій | CSR | SSR |
|---|---|---|
| SEO для публічного контенту | Погано | Добре |
| Перше завантаження | Повільніше (TTFB ~200 мс, потім гідратація) | Швидше (готовий HTML) |
| Наступні переходи | Миттєво | Кожен раз запит до сервера |
| Складний стан на клієнті | Природно (Zustand, Redux) | Ускладнюється (react-query, server state) |
| Серверні ресурси | Мінімум | Потрібен сервер для рендера |
| Офлайн-режим (PWA) | Можливий (Service Worker) | Складно |
Чому CSR підходить для SPA?
SPA — це архітектура, де весь інтерфейс працює в браузері, а сервер виступає тільки як API. CSR ідеально лягає на цю модель: немає серверного рендерингу, кожен маршрут — це компонент, що завантажується на вимогу. Користувач отримує плавні переходи без моргання сторінки. Для закритих додатків, таких як дашборди або особисті кабінети, де SEO не потрібне, CSR — найефективніший вибір. Порівняйте з SSR: на кожен перехід SSR генерує новий HTML, що створює затримки. CSR ж кешує маршрути на клієнті та оновлює тільки дані.
Як вибрати інструменти для CSR?
Ми використовуємо сучасний стек, перевірений у продакшені. Типова збірка включає:
- Vite для збірки (швидше Webpack у 10 разів на hot reload)
- React 18 або Vue 3 для UI
- TanStack Router для типобезпечного роутингу
- TanStack Query для серверного стану
- Vite PWA plugin для офлайн-режиму
Приклад конфігурації Vite з роутером та ручним чанкінгом:
import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { TanStackRouterVite } from '@tanstack/router-plugin/vite'; export default defineConfig({ plugins: [TanStackRouterVite(), react()], resolve: { alias: { '@': '/src' }, }, build: { rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom'], router: ['@tanstack/react-router'], query: ['@tanstack/react-query'], }, }, }, }, }); Як оптимізувати продуктивність CSR-додатку?
Стратегія: code splitting за маршрутами, аналіз бандла, динамічний імпорт важких бібліотек. Наприклад, бібліотека xlsx (200+ КБ) завантажується тільки при кліку на «Експорт». Використовуємо TanStack Router з lazy-завантаженням сторінок та Suspense. Додатково вмикаємо tree-shaking — Vite видаляє невикористаний код. Налаштуйте sideEffects: false у package.json для максимальної ефективності.
// Динамічний імпорт async function exportToExcel(data: Row[]) { const { utils, writeFile } = await import('xlsx'); const ws = utils.json_to_sheet(data); const wb = utils.book_new(); utils.book_append_sheet(wb, ws, 'Дані'); writeFile(wb, 'export.xlsx'); } Code splitting за маршрутами:
const DashboardPage = lazy(() => import('@/pages/Dashboard')); const ReportsPage = lazy(() => import('@/pages/Reports')); Яких метрик продуктивності ми досягаємо?
| Метрика | Цільове значення | Досягнуте |
|---|---|---|
| LCP | <2.5 с | 1.8 с |
| INP | <200 мс | 150 мс |
| First load JS | <150 КБ | 120 КБ |
| TTFB | <800 мс | 400 мс (CDN) |
Як ми заміряємо ці метрики?
Використовуємо Lighthouse CI у pipeline, а також лабораторні тести на реальних пристроях. Всі метрики фіксуються в Grafana.Як реалізувати PWA та офлайн у CSR?
Додаємо Vite PWA plugin. Workbox кешує API-запити (Stale-While-Revalidate, термін 24 год). Додаток працює офлайн.
VitePWA({ registerType: 'autoUpdate', workbox: { globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'], runtimeCaching: [ { urlPattern: /^https:\/\/api\.example\.com\/products/, handler: 'StaleWhileRevalidate', options: { cacheName: 'api-products', expiration: { maxAgeSeconds: 24 * 60 * 60 }, }, }, ], }, }) Які етапи включає розробка CSR?
- Аналітика: вивчаємо вимоги, навантаження, сценарії використання.
- Проєктування: архітектура модулів, схема даних, маршрути.
- Реалізація: ітеративна розробка з код-рев'ю та тестами.
- Тестування: unit, e2e (Playwright), продуктивність (Lighthouse).
- Деплой: налаштування CDN, CI/CD (GitHub Actions), моніторинг.
Що ви отримуєте в результаті?
- Технічна документація: архітектура, API-специфікація, інструкція з розгортання
- Вихідний код з CI/CD (GitHub Actions, Docker)
- Доступи до хостингу, домену, SSL
- Навчання команди: як запускати, налаштовувати, доопрацьовувати
- Підтримка: 2 тижні пост-релізу, виправлення багів
Скільки часу займає розробка та як розраховується вартість?
Орієнтовні терміни — від 4 до 12 тижнів залежно від складності. Вартість розраховується індивідуально після аудиту проєкту. Якщо ви хочете отримати консультацію щодо вибору архітектури, напишіть нам — допоможемо визначити, чи підходить CSR.
Ми створюємо швидкі чуйні інтерфейси. Замовте CSR-додаток під ключ — отримайте чуйний інтерфейс без компромісів.