Микрофронтенды и роутинг

В современных веб-приложениях архитектура микрофронтендов позволяет делить монолитное приложение на независимые, автономные модули, которые могут развиваться и развертываться отдельно. Каждый микрофронтенд обычно отвечает за конкретный функциональный блок: каталог товаров, корзина, профиль пользователя. Для их корректной работы необходимо обеспечить эффективный роутинг, который управляет навигацией между микрофронтендами и их внутренними маршрутами.

TanStack Router как инструмент маршрутизации

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

Ключевые особенности TanStack Router:

  • Декларативное описание маршрутов: маршруты описываются в виде объектов с четкой структурой, что упрощает их поддержку.
  • Вложенные маршруты и Layout-роутинг: возможность строить иерархию компонентов с наследованием общих layout-компонентов.
  • Асинхронная подгрузка данных: маршруты могут загружать данные перед рендерингом компонента.
  • Поддержка динамических сегментов URL: маршруты могут содержать параметры, которые автоматически передаются в компонент.
  • Программная навигация и управление историей: полное управление переходами без перезагрузки страницы.

Создание маршрутов для микрофронтендов

При работе с микрофронтендами важно проектировать маршруты так, чтобы каждый микрофронтенд был максимально автономен. Например, приложение может содержать три микрофронтенда: Home, Products и Profile. С помощью TanStack Router структура маршрутов может быть описана следующим образом:

import { createRouter, Route } from '@tanstack/router';
import Home from './microfrontends/Home';
import Products from './microfrontends/Products';
import Profile from './microfrontends/Profile';

const router = createRouter({
  routes: [
    new Route({ path: '/', component: Home }),
    new Route({ path: '/products/*', component: Products }),
    new Route({ path: '/profile/*', component: Profile }),
  ],
});

Использование символа * в маршрутах Products и Profile позволяет вложенным маршрутам этих микрофронтендов обрабатывать свои собственные сегменты URL.

Вложенные маршруты и layout-компоненты

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

const productsRoute = new Route({
  path: '/products',
  component: ProductsLayout,
  children: [
    new Route({ path: '/', component: ProductsList }),
    new Route({ path: ':productId', component: ProductDetail }),
  ],
});

В этом примере ProductsLayout является общим layout-компонентом для всех страниц микрофронтенда Products, а дочерние маршруты обрабатывают список товаров и страницу конкретного продукта.

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

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

const productDetailRoute = new Route({
  path: '/products/:productId',
  component: ProductDetail,
  loader: async ({ params }) => {
    const response = await fetch(`/api/products/${params.productId}`);
    return response.json();
  },
});

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

Интеграция нескольких микрофронтендов

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

const rootRouter = createRouter({
  routes: [
    homeRoute,
    productsRoute,
    profileRoute,
  ],
});

Каждый микрофронтенд остается автономным: он управляет своими внутренними маршрутами, loader-функциями и layout-компонентами, при этом корневой роутер обеспечивает единый URL-префикс и навигацию между микрофронтендами.

Программная навигация

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

router.navigate('/products');
router.navigate(`/products/${productId}`);

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

Вывод

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

Оглавление