Миграция React SPA на SSG: как решить проблему индексации Google

Вы сдали быстрое, плавное, тщательно проработанное приложение на React. Lighthouse Performance показывает 95. И всё же через три недели Google Search Console сигнализирует о Soft 404 на половине ваших маршрутов. Ваши страницы товаров, статьи, услуги индексируются по каплям, а порой и вовсе нет. Проблема не в вашем коде, а в рендеринге. Классический SPA отдаёт почти пустой HTML, который Googlebot должен гидратировать сам, имея ограниченный и непредсказуемый бюджет JavaScript.

Хорошая новость: переход на Static Site Generation (SSG) не требует переработки всего приложения. На трёх клиентских проектах, перенесённых в начале 2026 года, я сохранил ту же базу Vite + React, добавив лишь этап предварительного рендеринга маршрут за маршрутом. Вот метод и подводные камни.

Почему Googlebot игнорирует ваш React SPA

SPA отдаёт файл index.html, который содержит, по сути, <div id="root"></div> и JS-бандл. Реальный контент внедряется на стороне клиента после гидратации. Googlebot умеет выполнять JS, но с ограниченным и асинхронным бюджетом: страница сначала попадает в очередь рендеринга, иногда на несколько дней. Если ваш TTFB или бандл превышают определённые пороги, Google индексирует сырой HTML, а значит — ничего. Результат: Soft 404, пустые сниппеты в выдаче, сломанные превью OpenGraph в LinkedIn и iMessage.

SSG переворачивает логику. Каждый маршрут предварительно рендерится в полноценный HTML на этапе сборки. Googlebot, Bingbot, социальные краулеры и RSS-ридеры получают сразу читаемый документ, не выполняя ни строчки JavaScript. Гидратация на стороне клиента остаётся, чтобы сохранить привычную интерактивность React.

SSG без переработки всего приложения

Для существующего проекта Vite + React vite-react-ssg — самый прямой вариант. Сохраняем роутер, компоненты, хуки, вызовы Supabase. Достаточно заменить точку входа main.tsx на экспорт ViteReactSSG, который перечисляет маршруты для предварительного рендеринга, и заменить в package.json скрипт vite build на vite-react-ssg build. Остальной прикладной код не меняется.

При сборке каждый маршрут генерирует папку с собственным index.html: dist/contact/index.html, dist/portfolio/z-depannage/index.html и так далее. Со стороны Vercel задаём cleanUrls: true в vercel.json и убираем любое правило rewrite для SPA, которое перенаправляло бы всё на index.html, иначе предварительный рендеринг будет скрыт.

vite-react-ssg vs Next.js vs Astro: что выбрать?

vite-react-ssg — верный выбор, когда база уже существует на Vite + React и нужен лишь этап предварительного рендеринга. Миграция за один день на проекте среднего размера, без всякой переработки бизнес-кода.

Next.js — полноценный фреймворк с собственным роутером, своими конвенциями, своим App Router. Отлично подходит для нового проекта, но миграция с Vite предполагает переписывание маршрутизации, лейаутов, файловых конвенций и нередко аутентификации. От нескольких дней до нескольких недель в зависимости от размера.

Astro блистает на чисто контентных сайтах (блоги, документация, лендинги). На приложении, насыщенном React-взаимодействиями, его модель islands вынуждает дробить интерфейс на изолированные компоненты, гидратируемые по требованию, что усложняет совместное использование глобального состояния.

Чек-лист проверки после миграции

Три обязательные проверки после каждой сборки. Во-первых, папка dist/ должна содержать по одному index.html на каждый маршрут, и каждый файл должен весить несколько килобайт, а не быть только оболочкой SPA. Во-вторых, откройте один из этих HTML и убедитесь в наличии data-server-rendered="true" на корне, а также заполненных семантических секций (main, article, section) с реальным текстом. В-третьих, проверьте через curl или инспектор Google Search Console, что версия, отдаваемая в продакшене, действительно соответствует предварительно отрендеренному HTML.

Три повторяющихся подводных камня. Баг manifest-undefined в vite-react-ssg ломает страницы 404 с точки зрения SEO: простой обходной путь — создать пустой файл public/static-loader-data-manifest-undefined.json, содержащий {}. Директива CSP script-src должна сохранять 'unsafe-inline', поскольку гидратация внедряет обязательные inline-скрипты. Наконец, убедитесь, что скрипт build в package.json — это действительно vite-react-ssg build, а не vite build, иначе Vercel развернёт CSR-версию, сам того не заметив.

Результаты на 3 сайтах

Три выполненные миграции: Z-Dépannage и Milena Glow Up, плюс личное портфолио. Оценки Lighthouse выросли с 60-70 до 95-100 по всем четырём категориям. Срок индексации в Google сократился в пять раз: с 1-4 недель до 3-7 дней в среднем, по замерам в Search Console. Надёжный OpenGraph во всех публикациях в соцсетях, корректные сниппеты в выдаче, больше ни одного сигнала Soft 404.

Если ваш React-проект начинает получать органический трафик, а метрики индексации стоят на месте, SSG через vite-react-ssg — вероятно, рычаг с лучшим соотношением усилий и результата. Несколько часов на интеграцию, устойчивый прирост в поисковом продвижении и воспринимаемой производительности. Для аудита или сопровождения миграции страница контакты остаётся самой прямой точкой входа.