CSR, SSR, SSG, гидратация, кэширование, оффлайн-поддержка — не просто «умные» термины. Это технологии, требующие компромиссных решений.
Рассмотрим детально каждую из них.
CSR (Client-Side Rendering — рендеринг на стороне клиента)
Как работает
- Браузер загружает пустой HTML.
- Скачивается JavaScript.
- React/Vue отрисовывает интерфейс.
<div id="root"></div>
<script src="app.js"></script>Плюсы
- Быстрая навигация после загрузки.
- Большие возможности интерактивности.
- Простые API бэкенда.
Минусы
- Медленная первая загрузка.
- Плохая SEO-оптимизация.
- Пустой экран до JS-загрузки.
Идеально подходит для:
- панелей управления;
- панелей администратора;
- приложений с авторизацией.
SSR (Server-Side Rendering — рендеринг на стороне сервера)
Как работает
- Браузер запрашивает страницу.
- Сервер запускает React.
- Генерируется HTML.
- Браузер показывает контент немедленно.
- JavaScript подгружается позже.
Плюсы
- Быстрая отрисовка первого экрана.
- SEO-дружелюбность.
- Динамический контент.
Минусы
- Выше нагрузка на сервер.
- Медленный ответ на каждый запрос.
Идеально подходит для:
- интернет-магазинов;
- страниц с авторизацией;
- контента, ориентированного на конкретного пользователя.
SSG (Static Site Generation — генерация статических сайтов)
Как работает
- HTML генерируется на этапе сборки.
- Обслуживается из CDN.
- Никакой серверной логики на каждый запрос.
Плюсы
- Максимальная скорость.
- Очень дешево.
- Отличная SEO-оптимизация.
Минусы
- Не в режиме реального времени.
- Требует пересборки.
Идеально подходит для:
- блогов;
- маркетинговых сайтов;
- документации.
Гидратация: недостающее звено
Гидратация — это процесс, с помощью которого JavaScript активирует HTML, отрендеренный на сервере.
Что происходит:
- HTML уже виден.
- JS-бандл скачивается.
- React сопоставляет с DOM.
- Подключаются обработчики событий.
- Страница становится интерактивной.
Аналогия
SSR/SSG дает вам бумажную газету. Гидратация превращает ее в сенсорный планшет.
Без гидратации
- Интерфейс выглядит нормально.
- Но клики не работают.
- Страница «мертвая».
Сравнительная таблица
Подход offline-first (оффлайн-поддержка): механизм работы
Оффлайн-поддержка — это не магия.
Она создается с помощью:
- сервис-воркеров (Service Workers);
- Cache API;
- IndexedDB.
Сервис-воркеры: регулировщики трафика
Сервис-воркер:
- Перехватывает сетевые запросы.
- Решает: отдавать ответ из кэша или из сети.
- Работает в фоновом режиме.
- Обеспечивает оффлайн-поведение.
Представьте его в виде программируемого прокси-сервера прямо в браузере.
Варианты браузерного хранения:
- localStorage — тема, настройки, флаги;
- sessionStorage — временное состояние вкладки;
- IndexedDB — большие структурированные данные для оффлайн-режима;
- Cache API — статические активы и ответы API.
Стратегии кэширования
Cache First (сначала запрашивается ответ из кэша):
- Проверяем наличие ответа в кэше.
- Если ответа в кэше нет, сервис-воркер получает его из сети (как вариант, обновляя кэш для последующих обращений).
- Идеально подходит для статических активов.
Network First (сначала запрашивается ответ из сети):
- Пробуем получить ответ из сети.
- Если ответ не возвращается, проверяем его наличие в кэше.
- Идеально подходит для свежих данных.
Stale-While-Revalidate (кэш с фоновым обновлением)
- Мгновенно показываем кэшированные данные.
- В фоновом режиме подгружаем обновления.
- Достигаем оптимального баланса.
Реальный пример: WhatsApp Web
- IndexedDB → сообщения.
- Сервис-воркер → оффлайн.
- Кэш → картинки.
- localStorage → тема
Это архитектура продакшен-уровня.
Главный вывод
Фронтенд-архитектура — осознанный выбор компромиссного решения:
- CSR — для интерактивности;
- SSR — для SEO;
- SSG — для скорости;
- Гидратация — для удобства использования;
- Сервис-воркеры — для отказоустойчивости.
Понимая, на чем основан ваш выбор, вы легко настроите любой фреймворк.
Читайте также:
- Технологии фронтенд-разработки, утратившие свою актуальность
- Как создавать сайты с молниеносной загрузкой: рекомендации по оптимизации фронтенда. Часть 2
- Навыки фронтенд-разработчика, которые будут важны в 2026 году
Читайте нас в Telegram, VK и Дзен
Перевод статьи Santosh Yadav: I Got Asked These Frontend Architecture Concepts in Almost Every Interview
