Признаки SPA / клиентского рендеринга

Что это

SPA (Single Page Application) — это архитектура сайта, при которой контент страницы генерируется JavaScript в браузере пользователя, а не отдаётся готовым HTML с сервера. При первом запросе сервер возвращает почти пустой HTML-документ с тегом <div id="app"></div> и бандлом JS, который затем подгружает данные через API и строит DOM самостоятельно. Признаки SPA — это набор технических маркеров, по которым можно определить, что сайт использует клиентский рендеринг (CSR) вместо серверного (SSR) или статической генерации (SSG).

Почему это важно для SEO

Поисковые роботы обрабатывают JavaScript иначе, чем браузер человека. Googlebot умеет рендерить JS, но делает это в два этапа: сначала сохраняет «сырой» HTML, потом возвращается к рендерингу в очереди WRS (Web Rendering Service). Задержка между этапами — от нескольких часов до нескольких дней. Яндекс.Бот рендерит JS хуже и медленнее: по данным экспериментов, часть динамически подгружаемого контента Яндекс вообще не видит или видит с задержкой в 2–4 недели. Итог — страницы индексируются неполно или с опозданием.

Поведенческие факторы тоже страдают. SPA без SSR отдаёт пустую страницу до инициализации JS — пользователь видит белый экран 1–3 секунды. Это бьёт по Core Web Vitals (LCP растёт), а Яндекс учитывает скорость загрузки через ИКС-сигналы и Турбо-страницы. В Google AI Overviews и Я.Нейро попадает только тот контент, который робот реально прочитал в HTML — динамически подгружаемые блоки туда не попадают.

Как проверить вручную

1. Просмотр исходного кода страницы. Откройте любую страницу сайта, нажмите Ctrl+U (View Page Source). Если в HTML минимум текстового контента, много <script> тегов и есть корневой элемент вроде <div id="root"> или <div id="app"> — это признак CSR. Нормальный SSR-сайт в исходнике содержит весь текст страницы.

1. Отключение JavaScript в браузере. В Chrome DevTools: F12 → три точки → Settings → Debugger → Disable JavaScript. Перезагрузите страницу. Если видите пустую страницу или «Please enable JavaScript» — сайт полностью зависит от CSR. Проверьте так ключевые страницы: главную, карточки товаров, категории.

1. Сравнение Raw HTML и Rendered HTML в GSC и Я.Вебмастере. В Google Search Console: Проверка URL → «Просмотреть страницу как Googlebot» → вкладка HTML покажет то, что увидел робот. В Яндекс.Вебмастере: Инструменты → Проверка ответа сервера. Сравните объём текста в исходнике и в рендере.

1. Screaming Frog. В настройках включите режим Spider → Configuration → Rendering → JavaScript. Сравните колонки Indexability, Word Count и Title до и после рендеринга — разница укажет на проблемы с CSR.

1. PageSpeed Insights. Метрика TBT (Total Blocking Time) выше 300 мс при большом JS-бандле — косвенный признак тяжёлого CSR.

Как исправить

Цель — сделать так, чтобы критически важный контент был в HTML до выполнения JavaScript. Варианты по убыванию приоритета:

SSR (Server-Side Rendering) — сервер отдаёт готовый HTML. Самое надёжное решение для SEO.

SSG (Static Site Generation) — страницы генерируются заранее и раздаются как статика.

Prerendering — отдельный сервис рендерит JS и сохраняет HTML для роботов. Подходит как временное решение.

# Пример: запуск prerendering через prerender.io (Node.js middleware)
npm install prerender-node --save

# В Express:
app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN'));

По CMS:

• WordPress + плагин на React/Vue: используйте Next.js или Nuxt.js как frontend с WordPress как Headless CMS. Без этого — плагины типа Simply Static для SSG.
• Tilda: Tilda рендерит страницы на сервере — CSR-проблем нет из коробки. Если подключаете кастомный JS-виджет, убедитесь, что контент дублируется в HTML.
• 1C-Bitrix: в настройках компонента отключите AJAX-режим для страниц, которые должны индексироваться. Раздел «Настройки компонента → Кэш → Не использовать AJAX».
• Webflow: рендерит SSR по умолчанию — CSR возникает только при подключении кастомных React/Vue-приложений через Embed-блок.

Добавьте разметку Schema.org через JSON-LD — она работает надёжнее, чем микроданные в динамически генерируемых элементах:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Название товара",
  "description": "Описание"
}
</script>

Типичные ошибки

1. Пагинация через JS без изменения URL. Роботы не кликают «Показать ещё» — весь контент ниже первого экрана теряется. Решение: серверная пагинация с отдельными URL и тегом <a href>.

1. Мета-теги генерируются только в JS. Title и description, проставленные через document.title =, Яндекс часто не видит. Они должны быть в исходном HTML или генерироваться SSR.

1. Sitemap указывает на страницы с пустым HTML. Индексация идёт по очереди рендеринга, а не мгновенно — большая очередь в GSC означает, что часть контента не прочитана.

1. Lazy-load для контента, а не только для картинок. Если основной текст статьи или описание товара подгружается по Intersection Observer — робот его пропустит.

1. Отсутствие fallback-контента. Нет <noscript> тега с базовым содержимым для роботов, не поддерживающих JS.

Влияние на разные типы сайтов

Для интернет-магазинов CSR — критическая проблема. Карточки товаров, цены, описания и фильтры категорий, реализованные через CSR, индексируются частично или с большими задержками. Конкурент с SSR-сайтом получит преимущество в Яндексе через 2–4 недели после старта — это прямые потери трафика и продаж. Особенно болезненно для магазинов с частым обновлением ассортимента.

Контентные сайты и блоги на SPA теряют в скорости первого появления в индексе — новые статьи могут не появиться в поиске неделями. SaaS-продукты с маркетинговым лендингом на React или Vue рискуют не попасть в AI Overviews и расширенные сниппеты, если ключевые блоки с преимуществами и ценами генерируются клиентски. Лендинги на конструкторах (Tilda, Webflow) этой проблемы не имеют — выбирайте их, если не готовы внедрять SSR.