Предзагрузка страницы в Nuxt

При клиентской навигации Nuxt подгружает JavaScript и данные страницы, на которую ведёт ссылка. Если ждать этого только в момент клика, переход может на мгновение задержаться на медленной сети. Компонент NuxtLink умеет начинать загрузку заранее.

Давайте познакомимся с предзагрузкой. В Nuxt 3 и 4 по умолчанию ссылки NuxtLink, которые попали в видимую область окна, уже получают prefetch: фреймворк тянет ресурсы целевого маршрута до клика. Явный атрибут prefetch на ссылке подчёркивает это поведение или включает его там, где вы хотите гарантировать раннюю загрузку. Когда пользователь нажмёт на ссылку, код страницы часто уже лежит в кеше, и экран меняется быстрее.

Меню на главной с явной предзагрузкой раздела «About»:

<template>
	<h1>
		Home
	</h1>
	<nav>
		<NuxtLink prefetch to="/about">
			About
		</NuxtLink>
	</nav>
</template>

Файл app/pages/about.vue должен существовать. Пока ссылка видна на экране, Nuxt может начать подготовку маршрута /about. Если для отдельной ссылки предзагрузка не нужна, её отключают привязкой :prefetch="false" - тогда ресурсы подтянутся только после клика.

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

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