SPA на React/Vue/Angular — головная боль для SEO. Роботы видят пустой div, контент генерируется JS. Googlebot рендерит с задержкой, Яндекс — нестабильно.
SSR — основное решение
Server-Side Rendering: сервер отдаёт готовый HTML. Next.js для React, Nuxt.js для Vue. Робот получает полную страницу. Мой стандартный совет для коммерческих проектов.
SSG — для статичного контента
Страницы генерируются при сборке. Для блогов, документации, каталогов до 10 000 страниц.
Dynamic rendering — костыль
Роботам — HTML, пользователям — SPA. Google отказался от рекомендации в 2024. Только как временное решение.
Что проверить
Отключите JS в Chrome — если пусто, роботы видят то же. cache:url в Google. В Яндекс Вебмастере — «Проверить URL».
Если SPA проседает — технический аудит покажет что не индексируется.
Для SSR обязательно настройте кеширование HTML на CDN – это снизит нагрузку на сервер при индексации. Я использую Cloudflare или Varnish с TTL 1-4 часа. Проверьте, чтобы мета-теги и заголовки H1-H2 попадали в первоначальный HTML-ответ сервера (View Page Source в браузере). Для динамического контента добавьте data-seo атрибуты, которые SSR-движок подхватит при рендеринге. Например, для интернет-магазина: <ProductCard data-seo-title="{product.name} купить" />.
Если выбираете SSG, разбейте сборку на этапы при большом количестве страниц. Мой чеклист: 1) Генерация основных страниц (до 1000) в первую очередь 2) Инкрементальные сборки для обновлённого контента 3) Фоновую генерацию второстепенных страниц через очередь. Для VuePress/Gatsby добавьте плагин типа critical-css-webpack-plugin – он ускорит отрисовку контента для роботов. Проверяйте в Search Console отчёт «Эффективность» – фильтруйте по «HTML-страницам», чтобы отловить проблемы с JS-контентом.