SSG и ISR
Тема дорожной карты · React
Статическая генерация сайтов (SSG) — это стратегия рендеринга, при которой деревья React-компонентов предварительно рендерятся в статический HTML во время сборки, создавая страницы, мгновенно отдаваемые с CDN без какой-либо серверной обработки на каждый запрос. Next.js реализует SSG через функцию getStaticProps (Pages Router) или через создание асинхронных Server Components без динамических источников данных (App Router), генерируя HTML-файлы, полностью индексируемые для SEO. Инкрементальная статическая регенерация (ISR) расширяет SSG, позволяя отдельным страницам в фоновом режиме повторно валидироваться и перерендериваться с настраиваемым интервалом — задаваемым через параметр revalidate в getStaticProps или опцию next: { revalidate } в fetch-запросах App Router, — без необходимости полной пересборки сайта. ISR устраняет разрыв между статической производительностью и актуальностью динамических данных, что делает его идеальным для React-фронтендов с контентом, меняющимся редко: публикации блога, страницы продуктов или документация. Вместе SSG и ISR — это фундаментальные стратегии рендеринга в экосистеме Next.js, дополняющие SSR и подходы чистого SPA в полностековой архитектуре рендеринга и управления состоянием на React.
Как это работает
SSG и ISR рендерит 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 подходит.
Типичные ошибки
Ловушки SSG и ISR: browser-only API (window, localStorage) в компонентах, рендерящихся на сервере (крах — оборачивайте typeof window !== "undefined" или переносите в useEffect); hydration-mismatch (HTML сервера ≠ render клиента — невидимые баги); огромные getServerSideProps-payload, убивающие выгоду SSR; нет cache-заголовков на динамических маршрутах (бьёт origin). Прочтите Next.js docs про кеширование — defaults поменялись в 13/14.