Предварительная выборка маршрута в Next.js

Как Next.js ускоряет навигацию с помощью предварительной загрузки маршрутов и как это настроить.

Milica Mihajlija

В этой статье вы узнаете, как работает маршрутизация в Next.js, как она оптимизирована для повышения скорости и как настроить её в соответствии с вашими потребностями.

Компонент <Link>

В Next.js вам не нужно настраивать маршрутизацию вручную. Next.js использует маршрутизацию на основе файловой системы, что позволяет просто создавать файлы и папки внутри каталога ./pages/ :

Для создания ссылок на разные страницы используйте компонент <Link> , аналогично тому, как вы использовали бы старый добрый элемент <a> :

<Link href="/margherita">
  <a>Margherita</a>
</Link>

При использовании компонента <Link> для навигации Next.js делает за вас немного больше. Обычно страница загружается при переходе по ссылке, но Next.js автоматически предварительно загружает JavaScript, необходимый для отображения страницы.

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

В примере приложения страница index.js ссылается на margherita.js с помощью <Link> :

Используйте инструменты разработчика Chrome, чтобы убедиться, что margherita.js предварительно загружен: 1. Чтобы просмотреть сайт, нажмите « Просмотреть приложение» . Затем нажмите «Полноэкранный режим» . .

1. Откройте инструменты разработчика Chrome .
2. Перейдите на вкладку «Сеть» .
3. Установите флажок «Отключить кэш» .
4. Перезагрузите страницу.

При загрузке index.js на вкладке «Сеть» отображается информация о том, что margherita.js также был загружен:

Как работает автоматическая предварительная загрузка

Next.js предварительно загружает только те ссылки, которые отображаются в области просмотра, и использует API Intersection Observer для их обнаружения. Он также отключает предварительную загрузку при медленном сетевом соединении или при включенной функции Save-Data . На основе этих проверок Next.js динамически внедряет теги <link rel="preload"> для загрузки компонентов для последующей навигации.

Next.js только загружает JavaScript, но не выполняет его. Таким образом, он не загружает никакого дополнительного контента, который может быть запрошен предварительно загруженной страницей, пока вы не перейдете по ссылке.

Избегайте ненужной предварительной загрузки.

Чтобы избежать загрузки ненужного контента, вы можете отключить предварительную загрузку для редко посещаемых страниц, установив свойство prefetch для <Link> в значение ` false :

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

Во втором примере приложения страница index.js содержит <Link> на pineapple-pizza.js , в которой prefetch установлен на false :

Чтобы проверить сетевую активность, выполните действия из первого примера. При загрузке index.js на вкладке «Сеть» в инструментах разработчика отображается, что margherita.js загружен, а pineapple-pizza.js — нет:

Предварительная загрузка с пользовательской маршрутизацией

Компонент <Link> подходит для большинства случаев использования, но вы также можете создать собственный компонент для маршрутизации. Next.js упрощает это благодаря API маршрутизатора, доступному в next/router . Если вы хотите выполнить какое-либо действие (например, отправить форму) перед переходом на новый маршрут, вы можете определить это в своем собственном коде маршрутизации.

При использовании пользовательских компонентов для маршрутизации вы также можете добавить к ним предварительную выборку данных. Для реализации предварительной выборки в коде маршрутизации используйте метод prefetch из useRouter .

Взгляните на components/MyLink.js в этом примере приложения:

Предварительная загрузка выполняется внутри хука useEffect . Если свойство prefetch для <MyLink> установлено в true , то маршрут, указанный в свойстве href будет предварительно загружен при рендеринге этого <MyLink> :

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

При нажатии на ссылку маршрутизация выполняется в handleClick . В консоль выводится сообщение, и метод push переходит по новому маршруту, указанному в href :

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

В этом примере приложения страница index.js содержит <MyLink> на margherita.js и pineapple-pizza.js . Свойство prefetch установлено в true для /margherita и в значение false для /pineapple-pizza .

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

При загрузке index.js на вкладке «Сеть» отображается информация о том, что margherita.js загружен, а pineapple-pizza.js — нет:

При нажатии на любую из этих ссылок в консоли отобразится сообщение "Having fun with Next.js." и произойдет переход по новому маршруту:

Заключение

При использовании <Link> Next.js автоматически предварительно загружает JavaScript, необходимый для отображения связанной страницы, что ускоряет переход на новые страницы. Если вы используете собственную маршрутизацию, вы можете использовать API маршрутизатора Next.js для самостоятельной реализации предварительной загрузки. Избегайте ненужной загрузки контента, отключив предварительную загрузку для редко посещаемых страниц.