Предзагрузка маршрутов

В TanStack Router предзагрузка маршрутов (route prefetching) позволяет загружать данные и компоненты заранее, до того как пользователь перейдет на соответствующий маршрут. Это значительно улучшает восприятие производительности приложения, снижает время ожидания при навигации и делает интерфейс более отзывчивым.

Концепция предзагрузки

Предзагрузка основана на разделении логики маршрута и данных, необходимых для его рендеринга. В TanStack Router маршруты могут быть асинхронными, а их данные могут загружаться через функции loader, action или onLoad. Предзагрузка использует эти функции для запроса данных до того, как маршрут станет активным.

Основные возможности:

  • Prefetch данных (loader): заранее получает данные для маршрута.
  • Prefetch компонентов: загружает компонент маршрута асинхронно с помощью динамического импорта.
  • Автоматическая предзагрузка дочерних маршрутов: TanStack Router может предзагружать маршруты, находящиеся ниже в иерархии, для более плавной навигации.

Настройка предзагрузки

Для включения предзагрузки маршрута используется метод prefetch, который может быть вызван программно или автоматически через настройки маршрута. Рассмотрим ключевые параметры:

const router = createRouter({
  routes: [
    {
      path: '/dashboard',
      component: DashboardPage,
      loader: async () => fetch('/api/dashboard').then(res => res.json()),
      prefetch: 'intent', // варианты: 'none', 'intent', 'render'
    }
  ]
});
  • prefetch: 'none' — предзагрузка отключена.
  • prefetch: 'intent' — предзагрузка запускается при намерении пользователя перейти на маршрут (например, при наведении мыши на ссылку).
  • prefetch: 'render' — предзагрузка выполняется сразу после рендера родительского маршрута.

Prefetch данных с loader

Каждый маршрут может определять функцию loader, которая возвращает данные. TanStack Router использует loader для предзагрузки:

const userRoute = {
  path: '/user/:id',
  component: UserPage,
  loader: async ({ params }) => {
    const response = await fetch(`/api/users/${params.id}`);
    return response.json();
  },
  prefetch: 'intent',
};

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

Асинхронная подгрузка компонентов

Компоненты маршрутов часто разделяются на чанки для оптимизации загрузки. Предзагрузка помогает заранее загрузить эти чанки:

const DashboardPage = lazy(() => import('./DashboardPage'));

const routes = [
  {
    path: '/dashboard',
    component: DashboardPage,
    prefetch: 'intent',
  }
];

При наведении на ссылку /dashboard соответствующий JS-чанк загрузится, и переход будет мгновенным.

Предзагрузка дочерних маршрутов

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

const routes = [
  {
    path: '/settings',
    component: SettingsPage,
    prefetch: 'render',
    children: [
      {
        path: 'profile',
        component: ProfileSettings,
        loader: () => fetch('/api/profile-settings').then(res => res.json()),
        prefetch: 'intent',
      }
    ]
  }
];

Сценарий: пользователь видит ссылку /settings/profile. После рендера родительского маршрута /settings TanStack Router предзагрузит дочерний маршрут, а данные для ProfileSettings будут запрошены при наведении на ссылку.

Управление стратегиями предзагрузки

TanStack Router поддерживает гибкое управление предзагрузкой через глобальные стратегии:

const router = createRouter({
  routes,
  defaultPrefetch: 'intent', // стратегия по умолчанию для всех маршрутов
});

Стратегии позволяют балансировать между производительностью и расходом ресурсов. Например, для тяжелых маршрутов с большим количеством данных предпочтительно использовать intent, а для маленьких — render.

Программная предзагрузка

Кроме автоматической, маршруты можно предзагружать вручную с помощью метода router.prefetchRoute:

router.prefetchRoute('/dashboard');

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

Поддержка кеширования

TanStack Router использует встроенный кеш для результатов loader. Предзагрузка не дублирует запрос, если данные уже были загружены. Это снижает нагрузку на сервер и ускоряет повторные переходы.

// loader выполнится только один раз
const loader = async () => {
  const response = await fetch('/api/data');
  return response.json();
};

Важные моменты

  • Предзагрузка не запускает рендер компонента, если используется стратегия intent. Она только загружает данные и компоненты.
  • Для маршрутов с динамическими параметрами рекомендуется использовать intent, чтобы данные загружались именно для конкретного параметра.
  • Асинхронные компоненты с lazy должны оборачиваться в <Suspense> для корректного рендера при переходе.

Предзагрузка маршрутов в TanStack Router является мощным инструментом для повышения отзывчивости приложений, минимизации времени ожидания и оптимизации пользовательского опыта. Она комбинирует управление данными, компонентами и стратегиями навигации, позволяя строить высокопроизводительные SPA.

Оглавление