Предварительная загрузка (Prefetch)

Время загрузки страниц критически важно для удобства пользователей. Предварительная загрузка (prefetch) в Astro позволяет сделать навигацию в вашем многостраничном приложении (MPA) практически мгновенной.

Включение предварительной загрузки

Вы можете включить эту функцию в конфигурации:

import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: true
});

После этого вы можете добавить атрибут data-astro-prefetch к любым ссылкам <a>. Когда пользователь наведет курсор на такую ссылку, Astro начнет загружать страницу в фоновом режиме.

<a href="/about" data-astro-prefetch>О нас</a>

Стратегии загрузки

Astro поддерживает 4 стратегии предварительной загрузки:

hover (по умолчанию): Загрузка при наведении курсора или фокусе на ссылке.
tap: Загрузка непосредственно перед кликом.
viewport: Загрузка, когда ссылка появляется в области видимости (viewport).
load: Загрузка всех ссылок сразу после загрузки текущей страницы.

Вы можете указать стратегию для конкретной ссылки:

<a href="/about" data-astro-prefetch="viewport">О нас</a>

Глобальная настройка

Вы можете сделать предварительную загрузку всех ссылок по умолчанию:

export default defineConfig({
  prefetch: {
    prefetchAll: true,
    defaultStrategy: 'viewport'
  }
});

В этом случае вы можете отключить загрузку для конкретных ссылок с помощью data-astro-prefetch="false".

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

Вы можете вызывать загрузку из JavaScript с помощью модуля astro:prefetch:

<button id="btn">Загрузить страницу</button>

<script>
  import { prefetch } from 'astro:prefetch';

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    prefetch('/about');
  });
</script>

Поддержка браузерами

Astro использует стандартный механизм <link rel="prefetch">, если он поддерживается браузером, и переключается на fetch() в противном случае.

Для наилучшей работы убедитесь, что ваш сервер отдает правильные заголовки кеширования (например, ETag). На большинстве платформ развертывания это настроено автоматически.