Next.js 15 Tutorial - 55 - Dynamic Rendering

Динамическое рендеринг в Next.js

Введение в динамическое рендеринг

• Динамическое рендеринг — это стратегия серверного рендеринга, при которой маршруты создаются уникально для каждого пользователя по запросу. Это полезно для отображения персонализированных данных или информации, доступной только во время запроса.

Примеры использования

• Примеры применения динамического рендеринга включают новостные сайты, персонализированные страницы покупок и ленты социальных медиа. Эти случаи показывают, когда такая стратегия особенно выгодна.

Реализация динамического рендеринга

• В Next.js динамическое рендеринг автоматически активируется для всего маршрута при обнаружении так называемой "динамической функции" или "динамического API". К таким функциям относятся cookies, заголовки и параметры поиска.

Кодирование примера

• Для реализации динамического рендеринга необходимо изменить компонент о нас (about), импортировав функцию cookies из next/headers и преобразовав компонент в асинхронную функцию. Затем можно получить значение cookie и вывести его в консоль для проверки работы кода.

Проверка результата

• После сборки приложения с помощью команды npm run build, можно увидеть все сгенерированные маршруты в терминале. Обратите внимание на символ F рядом с маршрутом about, который указывает на то, что он был отрендерен по запросу (Dynamic rendering).

Заключение о динамическом рендеринге

• Динамически отрендеренные страницы не генерируются во время сборки приложения; вместо этого HTML создается по запросу пользователя. Это позволяет избежать хранения статических файлов для таких страниц, так как они создаются заново при каждом запросе.