Введение в кэш и рендеринг в Nuxt

В основном учебнике вы уже видели, что одна и та же страница Vue может собираться на сервере, только в браузере или заранее на этапе сборки. Там речь шла о смысле этих режимов: когда нужен готовый HTML для поисковиков, когда допустима пустая оболочка до гидратации и когда выгодно отдать файл, который не меняется часто. Высший учебник показывает, как переключать такое поведение для конкретных адресов без переписывания всего проекта.

В Nuxt правила для отдельных путей задают в объекте routeRules в nuxt.config.ts. Один адрес можно пометить для предварительной генерации HTML при npm run build, другой отключить от серверного рендеринга, третий на время отдавать из кэша, пока свежая версия готовится в фоне. Так на одном сайте соседствуют «вечная» страница «О нас», личный кабинет только для клиента и лента новостей, которую не нужно строить заново на каждый запрос.

Режим страницы и поведение данных связаны, но настраиваются по-разному. Функция useFetch по умолчанию старается выполнить запрос на сервере и передать результат в браузер вместе с HTML. Иногда экран должен появиться сразу, а список или таблица догрузятся позже. Иногда API безопасно вызывать только после гидратации, когда доступны объекты окна или токен из локального хранилища. Для этого у useFetch есть опции, которые откладывают ожидание данных или переносят запрос целиком на клиент.

Отдельно от HTTP-кэша страницы Nuxt хранит payload запросов между сервером и браузером. Если пользователь увидел устаревший список, его можно сбросить и заставить функцию загрузить JSON заново. Тяжёлые блоки интерфейса иногда выносят в компоненты, которые подключаются с префиксом Lazy, чтобы первый экран не тянул лишний JavaScript.

Примеры раздела опираются на структуру Nuxt 4: страницы в app/pages, настройки в nuxt.config.ts, компоненты в app/components. Вы уже уверенно пользуетесь useFetch; здесь мы меняем только правила маршрута и опции вызова, не вводя новый способ загрузки с нуля. Каждый урок можно повторить в проекте my-app после npm create nuxt@latest и запуска npm run dev, добавляя один приём за раз.