Чем отличаются SSG, SSR и ISR в Next.js и когда выбирать каждый вариант?

Режимы генерации страниц в Next.js: SSG, SSR и ISR

• Next.js — React-фреймворк, поддерживающий несколько способов формирования страниц
• SSG (Static Site Generation): HTML создаётся во время сборки
• SSR (Server-Side Rendering): HTML формируется сервером при каждом запросе
• ISR (Incremental Static Regeneration): обновление статических страниц уже после деплоя без полной пересборки проекта
• SSG обеспечивает высокую скорость и позволяет кэшировать страницы через CDN
• SSR показывает самые свежие данные, но создаёт дополнительную нагрузку на сервер
• ISR сочетает производительность со своевременным обновлением отдельных страниц
• Применение: SSG — блоги и маркетинговые сайты; SSR — дашборды и личные кабинеты; ISR — товары и каталоги, которые периодически меняются

Развёрнутый ответ

Основной ответ

В Next.js доступны три ключевые стратегии формирования страниц: SSG (Static Site Generation), SSR (Server-Side Rendering) и ISR (Incremental Static Regeneration). Их различие заключается в том, когда и каким способом создаётся HTML, а также как затем обновляется содержимое.

• При использовании SSG страницы формируются заранее, на этапе билда, и затем отдаются в виде статических файлов. Такой вариант даёт максимальную производительность и минимальную задержку (latency), однако для часто изменяющегося контента он не подходит.
• В режиме SSR сервер создаёт страницу заново для каждого запроса. Это позволяет отображать всегда актуальные данные, но увеличивает время ответа — примерно на 100-200мс в зависимости от нагрузки.
• ISR представляет собой гибридную модель: уже созданные статические страницы можно обновлять по заданному интервалу или после запроса, не выполняя полную новую сборку приложения.

Основные особенности

• Для SSG (Static Site Generation) используется функция getStaticProps, запускаемая во время сборки. Каждая страница создаётся один раз, благодаря чему обеспечиваются быстрая загрузка и эффективное кэширование через CDN.
• При SSR (Server-Side Rendering) применяется getServerSideProps, которая выполняется при каждом обращении к странице. Такой подход особенно важен для персонализированных страниц и контента, который часто меняется.
• ISR (Incremental Static Regeneration) дополняет SSG возможностью создавать отдельные страницы повторно уже после публикации. В Next.js 12+ для этого в revalidate задаётся параметр getStaticProps. В результате данные остаются более свежими, а сайт не требует полной пересборки.

Примеры использования

• Для блогов и маркетинговых сайтов часто выбирают SSG, поскольку в таких проектах особенно важны скорость загрузки и производительность.
• Интернет-магазины и дашборды нередко используют SSR, чтобы отображать актуальное состояние товаров или текущую информацию.
• ISR удобно применять на крупных сайтах, где данные обновляются регулярно, но не обязаны меняться в режиме реального времени. В качестве примеров можно привести новостные ресурсы и страницы товаров на маркетплейсах.

Таким образом, выбор стратегии повышает производительность и масштабируемость проекта: ресурсы можно распределять рационально с учётом конкретной задачи.