Критические данные и их приоритизация

Основы работы с критическими данными

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

TanStack Router предлагает встроенные механизмы загрузки данных через loaders и actions, которые позволяют централизованно управлять состоянием асинхронных запросов. Loader возвращает данные, которые будут доступны компоненту до рендеринга, а action выполняет побочные эффекты, например, отправку формы.

import { createRouter, RouterProvider } from '@tanstack/router';

const router = createRouter({
  routes: [
    {
      path: '/user/:id',
      loader: async ({ params }) => {
        const response = await fetch(`/api/user/${params.id}`);
        if (!response.ok) throw new Error('Failed to fetch user');
        return response.json();
      },
      component: UserComponent,
    },
  ],
});

Приоритизация загрузки данных

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

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

Для реализации приоритетов TanStack Router поддерживает cascade loaders — цепочки загрузчиков, которые выполняются в строгой последовательности в зависимости от уровня важности данных.

const router = createRouter({
  routes: [
    {
      path: '/dashboard',
      loader: async () => fetch('/api/session').then(r => r.json()), // Высокий приоритет
      children: [
        {
          path: 'widgets',
          loader: async () => fetch('/api/widgets').then(r => r.json()), // Средний приоритет
        },
        {
          path: 'analytics',
          loader: async () => fetch('/api/analytics').then(r => r.json()), // Низкий приоритет
        },
      ],
    },
  ],
});

Обработка ошибок критических данных

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

const router = createRouter({
  routes: [
    {
      path: '/user/:id',
      loader: async ({ params }) => {
        const res = await fetch(`/api/user/${params.id}`);
        if (!res.ok) throw new Error('User not found');
        return res.json();
      },
      component: UserComponent,
      errorComponent: UserErrorComponent,
    },
  ],
});

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

Синхронизация критических данных между маршрутами

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

const userLoader = async ({ params }) => {
  const res = await fetch(`/api/user/${params.id}`);
  return res.json();
};

const router = createRouter({
  routes: [
    {
      path: '/user/:id',
      loader: userLoader,
      component: UserProfile,
    },
    {
      path: '/user/:id/settings',
      loader: userLoader,
      component: UserSettings,
    },
  ],
});

Такой подход обеспечивает консистентность данных и уменьшает риск рассинхронизации между разными частями интерфейса.

Кэширование и повторное использование данных

TanStack Router интегрируется с системами кэширования, например, React Query, для хранения критических данных между навигациями. Loader может возвращать данные из кэша или обновлять их при необходимости, что позволяет избежать лишних сетевых запросов и ускоряет рендеринг маршрутов.

import { useQuery } from '@tanstack/react-query';

const userLoader = async ({ params }) => {
  return useQuery(['user', params.id], () =>
    fetch(`/api/user/${params.id}`).then(res => res.json())
  ).data;
};

Асинхронные переходы и блокировка интерфейса

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

function UserComponent() {
  const { data, isLoading } = useLoaderData();
  if (isLoading) return <LoadingSpinner />;
  return <UserProfile data={data} />;
}

Использование переходных состояний гарантирует, что критические данные всегда будут загружены перед отображением содержимого.

Итоговая структура приоритизации

  1. Определение критических данных для каждого маршрута.
  2. Назначение приоритетов загрузки (высокий, средний, низкий).
  3. Использование cascade loaders для последовательного выполнения загрузки.
  4. Обработка ошибок через errorComponent.
  5. Совместное использование данных через shared loaders.
  6. Кэширование и повторное использование через интеграцию с React Query.
  7. Контроль асинхронных переходов и блокировка интерфейса до завершения загрузки.

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

Оглавление