Стратегии обновления

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

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

Типы стратегий обновления

1. always — всегда обновлять

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

Пример настройки маршрута с этой стратегией:

const userRoute = router.createRoute({
  path: '/user/:id',
  loader: async ({ params }) => fetch(`/api/users/${params.id}`).then(res => res.json()),
  updateStrategy: 'always',
});

Особенности:

  • Каждый переход по маршруту вызывает повторный вызов loader.
  • Подходит для данных, чувствительных к времени, таких как лента новостей или курсы валют.

2. never — никогда не обновлять

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

Пример:

const settingsRoute = router.createRoute({
  path: '/settings',
  loader: async () => fetch('/api/settings').then(res => res.json()),
  updateStrategy: 'never',
});

Особенности:

  • Данные кэшируются на уровне маршрута.
  • Экономит ресурсы, если информация редко меняется.
  • Не подходит для динамических данных, которые обновляются часто.

3. default — обновление при изменении параметров

Стратегия default активирует обновление маршрута только тогда, когда изменяются параметры маршрута или ключевые состояния. Это оптимальный вариант для большинства маршрутов, где данные зависят от params или searchParams.

Пример:

const postRoute = router.createRoute({
  path: '/post/:postId',
  loader: async ({ params }) => fetch(`/api/posts/${params.postId}`).then(res => res.json()),
  updateStrategy: 'default',
});

Особенности:

  • Если пользователь переходит на тот же маршрут с тем же postId, повторный loader не вызывается.
  • Экономит трафик и ускоряет работу интерфейса.

Стратегии для вложенных маршрутов

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

Пример:

const dashboardRoute = router.createRoute({
  path: '/dashboard',
  children: [
    {
      path: 'stats',
      loader: async () => fetch('/api/stats').then(res => res.json()),
      updateStrategy: 'always',
    },
    {
      path: 'profile',
      loader: async () => fetch('/api/profile').then(res => res.json()),
      updateStrategy: 'default',
    },
  ],
});

Здесь stats обновляется всегда, независимо от родительского маршрута, а profile обновляется только при изменении параметров.

Динамическая смена стратегии

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

Пример:

userRoute.setUpdateStrategy('always');

После вызова все последующие переходы по маршруту userRoute будут использовать стратегию always, независимо от изначальной конфигурации.

Взаимодействие с кэшированием и loader

Стратегии обновления напрямую связаны с кэшированием данных в loader. При стратегии never результат loader кэшируется и переиспользуется. Стратегия default вызывает повторный loader только при изменении зависимостей. always игнорирует кэш и принудительно перезапрашивает данные.

Особенности реализации:

  • Каждый loader получает контекст с параметрами маршрута.
  • TanStack Router автоматически отслеживает зависимости и решает, требуется ли обновление, на основе выбранной стратегии.
  • Можно комбинировать с suspense или react-query для управления состоянием загрузки и ошибок.

Практические рекомендации

  1. Использовать always для страниц с динамическими, часто обновляющимися данными.
  2. never хорошо подходит для статических страниц, настроек или справочной информации.
  3. default — оптимальный выбор для страниц с параметризованными данными, где не требуется постоянная перезагрузка.
  4. Для вложенных маршрутов назначать стратегию индивидуально, чтобы минимизировать лишние перерендеры.
  5. При интеграции с внешними библиотеками для работы с данными учитывать, как выбранная стратегия влияет на повторные запросы и кэширование.
Оглавление