Рендеринг

По умолчанию 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. Чтобы узнать больше, ознакомьтесь с документацией по Получению данных.