Рендеринг

По умолчанию Next.js выполняет предварительный рендеринг (pre-rendering) для каждой страницы. Это означает, что Next.js генерирует HTML для каждой страницы заранее, вместо того чтобы делать это полностью на стороне клиента с помощью JavaScript. Предварительный рендеринг может улучшить производительность и SEO.

Каждый сгенерированный HTML связан с минимальным необходимым JavaScript-кодом для этой страницы. Когда страница загружается в браузере, её JavaScript-код выполняется и делает страницу полностью интерактивной (этот процесс называется гидратацией (hydration) в React).

Предварительный рендеринг

Next.js поддерживает две формы предварительного рендеринга: Статическую генерацию (Static Generation) и Рендеринг на стороне сервера (Server-side Rendering). Разница заключается в том, когда генерируется HTML для страницы.

• Статическая генерация: HTML генерируется во время сборки (build time) и повторно используется при каждом запросе.
• Рендеринг на стороне сервера: HTML генерируется при каждом запросе.

Важно, что Next.js позволяет выбирать, какую форму предварительного рендеринга использовать для каждой страницы. Вы можете создать "гибридное" приложение Next.js, используя Статическую генерацию для большинства страниц и Рендеринг на стороне сервера для остальных.

Мы рекомендуем использовать Статическую генерацию вместо Рендеринга на стороне сервера из соображений производительности. Статически сгенерированные страницы могут кэшироваться CDN без дополнительной настройки для повышения производительности. Однако в некоторых случаях Рендеринг на стороне сервера может быть единственным вариантом.

Вы также можете использовать получение данных на стороне клиента вместе со Статической генерацией или Рендерингом на стороне сервера. Это означает, что некоторые части страницы могут быть полностью отрендерены с помощью клиентского JavaScript. Подробнее об этом можно узнать в документации Получение данных.