> Какие стратегии рендеринга бывают в Next.js и их плюсы и минусы (JavaScript, Next.js)

Короткий ответ

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

Подробное объяснение

SSR (Server-Side Rendering) - страница рендерится на сервере при каждом запросе. Плюсы: свежие данные, хороший SEO, подходит для персонализированного контента. Минусы: высокая нагрузка на сервер, большее время ответа (TTFB), сложнее кеширование.

SSG (Static Site Generation) - HTML генерируется один раз на этапе сборки. Плюсы: минимальное время загрузки, легко кешируется через CDN, низкая стоимость хостинга. Минусы: не подходит для динамических данных, требует пересборки при изменении контента.

ISR (Incremental Static Regeneration) - гибрид SSG, где страницы перестраиваются в фоне по заданному интервалу. Плюсы: сочетает скорость SSG с возможностью обновления данных, эффективное кеширование. Минусы: сложность настройки revalidate, возможна задержка между обновлением данных и отображением.

CSR (Client-Side Rendering) - сервер отдаёт пустой HTML, данные подгружаются через API на клиенте. Плюсы: минимальная нагрузка на сервер, подходит для интерактивных приложений. Минусы: плохой SEO, долгая загрузка контента, проблемы с производительностью на слабых устройствах.

Выбор стратегии зависит от характера данных: статический контент - SSG, динамический с требованиями к SEO - SSR, часто обновляемый контент - ISR, приватные панели - CSR.

На практике

При выборе стратегии важно учитывать:

• Частота обновления данных: для блога с редкими публикациями - SSG, для новостного портала - ISR или SSR.
• Требования к SEO: если контент должен индексироваться - SSR или SSG, для админок - CSR.
• Бюджет на серверные ресурсы: SSG и ISR дешевле, SSR требует больше мощностей.
• User experience: для страниц с быстрым первым отображением - SSG/ISR, для интерактивных дашбордов - CSR.

В реальных проектах часто комбинируют стратегии: статические маркетинговые страницы на SSG, блог на ISR, а личный кабинет на CSR. Next.js позволяет гибко настраивать это через getStaticProps, getServerSideProps и getStaticPaths.

Как отвечать на собеседовании

Начни с краткого перечисления стратегий, затем углубись в сравнение. Подчеркни, что выбор зависит от конкретного use case. Приведи примеры: для e-commerce с каталогом товаров лучше ISR, для страницы товара с частым изменением цены - SSR. Упомяни, что в Next.js 13+ появился Server Components, который меняет подход к рендерингу. Не забудь про trade-off между производительностью и актуальностью данных.

Что проверяет интервьюер

• Понимание разницы между серверным и клиентским рендерингом.
• Умение выбирать стратегию под конкретные бизнес-требования.
• Знание особенностей Next.js: getStaticProps, getServerSideProps, revalidate.
• Осознание компромиссов: скорость vs свежесть данных, стоимость хостинга vs SEO.
• Понимание современных трендов (Server Components, streaming).

Типичные ошибки

• Использовать SSR для статического контента, который можно отрендерить на этапе сборки.
• Применять SSG для страниц с часто меняющимися данными без ISR.
• Забывать про SEO при выборе CSR для публичных страниц.
• Не учитывать время перестроения при ISR (stale-while-revalidate).
• Путать ISR с SSR - ISR всё ещё статическая генерация, а не серверный рендеринг на каждый запрос.