В честь 16-летия мы дарим нашим клиентам приятные бонусы!
Испытай удачу и получи бонус от нас уже сейчас!
Техническое SEO
CSR (Client-Side Rendering)
CSR (Client-Side Rendering, рендеринг на стороне клиента) — это способ построения веб-страницы, при котором весь контент формируется в браузере пользователя с помощью JavaScript. Вместо того чтобы получать готовый HTML с сервера, браузер загружает пустую оболочку страницы и скрипты, которые затем запрашивают данные и отрисовывают интерфейс. Такой подход часто используется в одностраничных приложениях (SPA) на базе React, Vue или Angular. Для SEO это означает: поисковые роботы видят только исходный пустой HTML, а контент появляется позже, поэтому без дополнительных настроек страница может не индексироваться корректно.
Что такое CSR и почему это важно для SEO
CSR (Client-Side Rendering) — это архитектура рендеринга, которая стала популярной с ростом одностраничных приложений (SPA). В классическом серверном рендеринге (SSR) браузер получает готовый HTML-код с сервера, который уже содержит весь контент. В CSR сервер отдаёт лишь минимальную HTML-оболочку и ссылку на JavaScript-бандл. Браузер выполняет скрипты, которые подгружают данные через API и строят DOM (дерево элементов) на лету. Такой подход делает взаимодействие с сайтом более быстрым и плавным после первой загрузки, но создаёт серьёзные проблемы для поисковых систем.
Для SEO ключевой момент: поисковые роботы, особенно Google, используют две волны индексации. Первая волна — это рендеринг исходного HTML без выполнения JavaScript. Если страница работает на CSR, робот видит пустой контейнер
и ноль контента. Вторая волна — это рендеринг с выполнением JS, который происходит позже и может занять от нескольких дней до недель. Но если сайт медленный или скрипты падают, контент может вообще не попасть в индекс. Поэтому для критически важных страниц (лендинги, статьи, каталоги) CSR в чистом виде — это риск.Как это работает технически? Представим простой пример. Пользователь открывает сайт интернет-магазина, написанного на React. Сервер отвечает HTML-страницей с пустым корнем, подключает main.js и main.css. Браузер загружает скрипты, которые запускают приложение. React выполняет код, делает fetch-запрос к API /api/products, получает JSON с товарами, и только потом рисует карточки товаров на экране. Всё это происходит за доли секунды для пользователя, но для робота, который не выполняет JS на первой волне, страница выглядит пустой.
Практический пример: вы создали сайт-портфолио на Vue.js. Главная страница показывает проекты, которые подгружаются с внешнего сервиса. Если вы не настроили пререндеринг или динамическую отдачу в зависимости от User-Agent, Google может проиндексировать только заголовок и пустой main. В результате в поиске сайт будет отображаться без описания, а все ключевые запросы, связанные с вашими проектами, останутся вне выдачи. Чтобы этого избежать, нужно либо использовать гибридный рендеринг (SSR + CSR), либо настроить предварительную генерацию статического HTML для ключевых страниц.
Типичная ошибка — думать, что Google давно умеет рендерить JS и проблема решена сама собой. Да, Googlebot использует Chrome и выполняет JavaScript, но он ограничен по ресурсам и не гарантирует такой же рендеринг, как у реального пользователя. На практике многие сайты на чистом CSR сталкиваются с тем, что содержание появляется в индексе с задержкой или пропадает при переобновлении. Также часто SEO-специалисты забывают, что внутренние ссылки в SPA могут быть не видимы для робота, если они генерируются только через JS-клики, а не через реальные href-атрибуты. Поэтому при использовании CSR обязательно проверяйте страницы в Google Search Console через инструмент «Проверка URL» и следите за тем, чтобы весь важный контент был доступен в исходном HTML или хотя бы в prerender-версии.
Таким образом, CSR — это мощный инструмент для пользовательского опыта, но для SEO он требует дополнительных усилий: настройка SSR, статической генерации или динамического рендеринга. В проектах, где важна скорость индексации и видимость в поиске, лучше использовать гибридные подходы, а CSR оставлять для интерактивных элементов внутри уже отрендеренных страниц.
