Два вида предварительного рендеринга

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

• Статическая генерация — это метод предварительного рендеринга, при котором HTML генерируется во время сборки. Затем предварительно сгенерированный HTML переиспользуется при каждом запросе.
• Рендеринг на стороне сервера (SSR) — это метод предварительного рендеринга, при котором HTML генерируется при каждом запросе.

В режиме разработки (при запуске npm run dev или yarn dev) страницы предварительно рендерятся при каждом запросе. Это также относится к Статической генерации для упрощения разработки. В продакшене Статическая генерация происходит один раз во время сборки и не выполняется при каждом запросе.

Выбор на уровне страницы

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

Когда использовать Статическую генерацию или Рендеринг на стороне сервера (SSR)

Мы рекомендуем по возможности использовать Статическую генерацию (с данными и без), так как страница может быть собрана один раз и обслуживаться через CDN, что делает её гораздо быстрее, чем рендеринг на сервере при каждом запросе.

Статическую генерацию можно использовать для многих типов страниц, включая:

• Маркетинговые страницы
• Посты в блоге
• Списки товаров в интернет-магазине
• Справку и документацию

Задайте себе вопрос: "Могу ли я предварительно отрендерить эту страницу до запроса пользователя?" Если ответ "да", то следует выбрать Статическую генерацию.

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

В таком случае можно использовать Рендеринг на стороне сервера (SSR). Он будет медленнее, но предварительно отрендеренная страница всегда будет актуальной. Или можно отказаться от предварительного рендеринга и использовать клиентский JavaScript для загрузки часто обновляемых данных.

Фокус на Статической генерации

В этом уроке мы сосредоточимся на Статической генерации. На следующей странице мы обсудим Статическую генерацию с данными и без.