SSR и Next.js
Тема дорожной карты · React
Серверный рендеринг (SSR) с React означает рендеринг деревьев компонентов в HTML на сервере для каждого входящего запроса, с отправкой полностью сформированной разметки в браузер, чтобы пользователи и поисковые роботы видели осмысленный контент немедленно — до выполнения какого-либо JavaScript. Next.js — доминирующий фреймворк для SSR в экосистеме React: getServerSideProps в Pages Router и асинхронные Server Components в App Router являются основными механизмами получения данных в момент запроса на сервере. SSR с React улучшает время до первого байта (TTFB) для страниц с персонализированными или часто меняющимися данными и критически важен для SEO, поскольку поисковые роботы получают полностью отрендеренный HTML вместо пустой SPA-оболочки. Стриминговый SSR в React 18 — работающий на основе renderToPipeableStream и Suspense — позволяет серверу постепенно сбрасывать HTML-чанки клиенту по мере поступления данных, улучшая воспринимаемую производительность Next.js-приложений. Управление состоянием в контексте SSR требует осторожности: данные, полученные на сервере, должны быть сериализованы и переданы клиенту для гидратации без возникновения расхождений между серверным деревом и клиентским деревом React.
Как это работает
SSR и Next.js рендерит React на сервере, отдаёт HTML в браузер, гидратирует JavaScript для интерактивности. Next.js — доминирующий фреймворк; App Router (с 13) вводит React Server Components (RSC), исполняющиеся только на сервере, не отправляющие JS и стримящие HTML. SSG (Static Site Generation) пререндерит страницы на билд-тайме; ISR (Incremental Static Regeneration) ревалидирует через TTL или по запросу. Выбор зависит от свежести данных.
Когда применять
SSR — когда важен SEO (блог, маркетинг, продуктовые страницы) и данные per-request или per-user. SSG — для контента, редко меняющегося (доки, маркетинг). ISR — для блогов/новостей, где страницы строятся раз, потом периодически ревалидируются. Пропустите SSR для чисто-интерактивных приложений (Figma, дашборды), где time-to-interactive важнее first-paint HTML — SPA подходит.
Типичные ошибки
Ловушки SSR и Next.js: browser-only API (window, localStorage) в компонентах, рендерящихся на сервере (крах — оборачивайте typeof window !== "undefined" или переносите в useEffect); hydration-mismatch (HTML сервера ≠ render клиента — невидимые баги); огромные getServerSideProps-payload, убивающие выгоду SSR; нет cache-заголовков на динамических маршрутах (бьёт origin). Прочтите Next.js docs про кеширование — defaults поменялись в 13/14.