Рендеринг

По умолчанию 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. Подробнее об этом можно узнать в документации Получение данных.