SEO-оптимизация через SSR

Одной из ключевых возможностей TanStack Router является поддержка серверного рендеринга (SSR), что открывает прямой путь к улучшению SEO для современных SPA-приложений на React. Серверный рендеринг позволяет выдавать полностью сформированный HTML на запрос страницы, что обеспечивает корректное индексирование контента поисковыми системами.

Настройка SSR с TanStack Router

Для включения SSR необходимо использовать методы createRouter и matchRoutes на сервере. Основная идея заключается в том, чтобы сформировать дерево маршрутов на сервере, собрать необходимые данные и сгенерировать HTML до отправки клиенту.

Пример базовой конфигурации сервера на Node.js с Express:

import express from 'express';
import { createRouter, RouterProvider, matchRoutes } from '@tanstack/router';
import { renderToString } from 'react-dom/server';
import App from './App';
import routes from './routes';

const app = express();
const router = createRouter({ routes });

app.get('*', async (req, res) => {
  const matchedRoutes = matchRoutes(router, req.url);

  // Предзагрузка данных для каждого маршрута
  await Promise.all(
    matchedRoutes.map(({ route }) => route.loader?.({ params: route.params }))
  );

  const html = renderToString(<RouterProvider router={router} />);
  res.send(`
    <!DOCTYPE html>
    <html lang="ru">
    <head>
      <meta charset="UTF-8" />
      <title>Пример SSR с TanStack Router</title>
    </head>
    <body>
      <div id="root">${html}</div>
      <script src="/bundle.js"></script>
    </body>
    </html>
  `);
});

app.listen(3000);

Предзагрузка данных и SEO

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

Пример loader для маршрута /posts/:id:

const postRoute = {
  path: '/posts/:id',
  component: Post,
  loader: async ({ params }) => {
    const response = await fetch(`https://api.example.com/posts/${params.id}`);
    return response.json();
  },
};

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

Управление мета-тегами и заголовками

Для SEO важно корректно формировать <title>, <meta description> и Open Graph-теги. TanStack Router не занимается этим автоматически, но интегрируется с библиотеками вроде React Helmet или @tanstack/react-head, позволяя обновлять мета-информацию во время SSR:

import { Helmet } from 'react-helmet';

function Post({ data }) {
  return (
    <>
      <Helmet>
        <title>{data.title}</title>
        <meta name="description" content={data.summary} />
      </Helmet>
      <article>
        <h1>{data.title}</h1>
        <p>{data.content}</p>
      </article>
    </>
  );
}

При SSR эти теги будут встроены в HTML на сервере, обеспечивая правильную индексацию.

Динамические маршруты и SEO

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

const postsRoutes = {
  path: '/posts/:id',
  loader: async ({ params }) => {
    // Возвращает данные для всех постов или конкретного
  },
};

Для крупных проектов имеет смысл реализовать функцию getStaticPaths, которая возвращает список всех возможных динамических путей, чтобы сервер мог сгенерировать HTML для каждого из них заранее.

Кэширование SSR и ускорение индексации

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

  • Кэширование HTML: полностью сгенерированная страница сохраняется в памяти или CDN.
  • Кэширование данных loader: сохраняются результаты API-запросов для ускорения повторного рендеринга.

Пример простого кэширования данных:

const cache = new Map();

const postLoader = async ({ params }) => {
  if (cache.has(params.id)) return cache.get(params.id);
  const data = await fetchPostById(params.id);
  cache.set(params.id, data);
  return data;
};

Интеграция с аналитикой и SEO-метриками

Использование SSR открывает возможность интеграции с инструментами аналитики на сервере: метрики скорости загрузки, корректность разметки, Lighthouse. TanStack Router в связке с SSR позволяет отслеживать реальные HTML-страницы, а не только клиентские события, что повышает точность анализа SEO.

Ключевые рекомендации

  • Все маршруты, критичные для SEO, должны поддерживать loader для предзагрузки данных.
  • Использовать SSR для формирования полного HTML-контента перед отправкой клиенту.
  • Интегрировать управление мета-тегами через React Helmet или @tanstack/react-head.
  • Реализовать кэширование как HTML, так и данных loader для ускорения отклика.
  • Для динамических маршрутов применять стратегию предгенерации страниц или getStaticPaths.

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

Оглавление