JavaScript-фреймворки и SEO: React, Vue, Next.js

Если вы планируете делать сайт на React, Vue или Angular, первая мысль команды разработки — «возьмём Create React App или чистый Vue SPA». С точки зрения скорости разработки логично, с точки зрения SEO — это путь к долгим и дорогим переделкам. Поисковые роботы плохо дружат с сайтами, которые собирают контент в браузере, и для российских проектов это особенно чувствительно.

01В чём проблема SPA и поиска

Сайт на чистом React или Vue в режиме SPA устроен так: с сервера приходит почти пустой HTML с одной строчкой <div id="root"></div>, а весь контент дорисовывается JavaScript уже в браузере. Для пользователя всё ок: он видит готовую страницу. Для поискового робота — нет.

Google умеет рендерить JavaScript, но делает это с задержкой и не для всех страниц одинаково охотно. Яндекс с JS работает заметно скромнее: гарантированно индексируется только тот контент, который виден в исходном HTML. Если вы хотите попадать в поиск по информационным запросам, важно, чтобы основной текст, заголовки и микроразметка были в HTML на момент первой загрузки.

02SSR, SSG и гидратация — что это и зачем

Есть три базовых подхода, как «починить» SPA для поиска:

• SSR (Server-Side Rendering) — сервер на лету собирает готовый HTML с контентом и отдаёт его браузеру. После этого JS «оживляет» страницу (гидратация). Хороший выбор для динамических данных: каталог, поиск, личный кабинет.
• SSG (Static Site Generation) — HTML собирается заранее во время сборки сайта и просто отдаётся как обычные статические страницы. Идеально для блогов, лендингов, документации.
• ISR (Incremental Static Regeneration) — гибрид: страницы статические, но регулярно пересобираются на сервере. Удобно для каталогов, где данные меняются раз в день.

Все три варианта решают одну задачу: робот получает готовый HTML, а пользователь — современный интерфейс с быстрой навигацией.

03Next.js, Nuxt и Astro — что выбрать

Раньше SSR нужно было городить руками — поднимать Express, прокидывать рендер React и так далее. Сегодня для каждого популярного фреймворка есть метафреймворк, в котором SSR/SSG включены «из коробки»:

Next.js (React)

Де-факто стандарт для серьёзных проектов на React. Поддерживает SSR, SSG, ISR и App Router с серверными компонентами. Если вы делаете сайт на React, который должен индексироваться, — почти всегда стоит брать Next.js. Сайт BrandEvo тоже работает в этой логике: контент собран на сервере, страницы получаются быстрыми и видимыми для роботов.

Nuxt (Vue)

Аналог Next.js для Vue. Поддерживает все режимы рендеринга и автоматическую генерацию sitemap. Если команда уверенно работает с Vue — Nuxt снимет с вас 90% SEO-проблем фреймворка.

Astro

Молодой, но активно развивающийся метафреймворк. Особенность — «острова» интерактивности: на странице по умолчанию ноль JS, и только нужные блоки гидратируются. Очень быстрый, отлично индексируется. Подходит для контентных сайтов, блогов, документации.

SvelteKit и Remix

Для проектов на Svelte и для тех, кто хочет глубокий контроль над загрузкой данных. По SEO — обе технологии решают вопрос, если использовать SSR-режим.

04Что обязательно настроить в JS-сайте под SEO

Просто переехать на Next.js или Nuxt — недостаточно. Несколько вещей нужно проверить вручную:

• Title и meta description — уникальные на каждую страницу, формируются на сервере, а не дописываются JavaScript после загрузки.
• Open Graph и Twitter Cards — особенно важны для расшаривания. В SPA эти теги часто не подхватываются.
• Структурированные данные (Schema.org) — Article, BreadcrumbList, Organization, Product. Кладите JSON-LD в HTML.
• Семантический HTML — h1, h2, nav, main, article. На React это легко забыть и обернуть всё в div.
• Хлебные крошки и внутренняя перелинковка — должны быть в исходном HTML, а не появляться через JS после клика. Подробнее о значении ссылок — в материалах о SEO.
• sitemap.xml и robots.txt — генерируются автоматически в Next.js и Nuxt при правильной настройке.
• Чистые URL без хеша — никаких /#/page/123, только полноценные пути.

05Как проверить, что JS-сайт реально индексируется

Минимальный чек-лист, который стоит прогнать перед запуском:

• Откройте страницу в браузере, нажмите Ctrl+U — это сырой HTML, который видит робот. Если в нём пусто, кроме скриптов, — у вас всё ещё SPA.
• В Яндекс.Вебмастере используйте инструмент «Проверить ответ сервера» и «Просмотр глазами робота».
• В Google Search Console посмотрите «URL Inspection» — увидите, как страница рендерится Googlebot.
• Проверьте отдельные разделы: каталог, фильтры, пагинация. Часто SSR работает на главной, а в каталоге — снова SPA.
• Замерьте Core Web Vitals: гидратация на тяжёлых страницах может проседать LCP и INP. Это уже не только SEO, но и UX.

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

06Когда JS-фреймворк действительно нужен, а когда нет

JS-фреймворки — мощный инструмент, но не для каждой задачи. Если у вас:

• Корпоративный сайт-визитка, лендинг или блог — почти всегда выгоднее WordPress, Bitrix или Astro со статической генерацией. SEO работает «из коробки», правки делает контент-менеджер, доработка — копеечная.
• Интернет-магазин малого и среднего размера — WooCommerce, Tilda, Bitrix; ускорение через кэширование и CDN, а не через перенос на Next.js.
• SaaS-продукт с личным кабинетом, маркетплейс, сложный интерактивный сервис — здесь JS-фреймворк оправдан. Для индексируемых разделов (главная, лендинги, статьи) делайте SSR/SSG, для приложения — обычный SPA.
• Headless-история: контент в Strapi или Sanity, фронт на Next.js — отличная архитектура, но требует команды и бюджета. Подробнее — в нашей статье «Headless WordPress + React: для каких задач».

Правильный вопрос на старте — не «какой фреймворк взять», а «какие задачи будет решать сайт через год». От ответа зависит и стек, и стоимость, и сроки. Команда, которая делает сайт и продвижение в связке, обычно сразу учитывает SEO-требования в архитектуре.

Официальная документация по теме — Справка Яндекс.Вебмастера.