Client-Side Rendering

Client-Side Rendering (CSR, рендеринг на стороне клиента) — это подход, при котором сервер отдаёт почти пустой HTML и пакет JavaScript, а весь видимый контент собирается уже в браузере пользователя. Страница «оживает» после того, как JS загрузится и выполнится, — до этого момента в коде страницы может не быть ни текста, ни ссылок.

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

Что такое Client-Side Rendering и зачем он нужен

CSR — основа современных одностраничных приложений (SPA) на React, Vue или Angular. Он даёт плавные переходы без перезагрузки страницы и разгружает сервер, ведь тот не собирает HTML под каждый запрос. Для интерфейсов в стиле «приложение» (личный кабинет, дашборд, редактор) это почти идеально.

А вот для контентных страниц, которые должны ранжироваться, Client-Side Rendering — риск. Googlebot умеет выполнять JavaScript, но делает это в два этапа и с задержкой: сначала индексирует «сырой» HTML, а рендеринг ставит в очередь. Если весь контент появляется только после JS, он может долго не попадать в индекс — или не попасть вовсе.

Как работает CSR

• Браузер получает минимальный HTML и <script> с бандлом JavaScript.
• JS загружается, выполняется и запрашивает данные из API.
• Только после этого DOM наполняется текстом, изображениями и ссылками.
• Поисковый робот видит финальный контент лишь на этапе рендеринга, который может отложиться на часы или дни.

SEO-риски и как их обойти

• Задержка индексации. «Пустой» первый HTML → контент индексируется позже или частично.
• Потеря ссылок. Если навигация отрисовывается только через JS, краулер может не найти внутренние страницы.
• Мета-теги. Title и description, подставляемые скриптом, рискуют не считаться вовремя.
• Решение: Server-Side Rendering, пре-рендеринг статических страниц или гибридный (isomorphic) подход — чтобы критичный контент был в HTML сразу.

Пример

Интернет-магазин на чистом React показывал товары только после выполнения JavaScript. В «сыром» HTML карточек не было — и сотни страниц месяцами висели вне индекса. После перехода на SSR тот же каталог начал индексироваться за дни: контент появился уже в первом HTML-ответе.

Часто путают с…

• Server-Side Rendering — сервер отдаёт готовый HTML сразу; CSR собирает его в браузере.
• Статическая генерация (SSG) — HTML готовится заранее во время сборки, а не «на лету» и не в браузере.

Вопросы и ответы

Индексирует ли Google сайты на Client-Side Rendering?

Да, Googlebot выполняет JavaScript и видит CSR-контент, но с задержкой из-за двухэтапного рендеринга. Поэтому для важных страниц надёжнее отдавать контент в HTML сразу.

Когда CSR уместен?

Для интерфейсов-приложений за авторизацией (кабинеты, дашборды), где SEO не нужно. Для контента, который должен ранжироваться, лучше SSR или пре-рендеринг.

Чем CSR отличается от SSR?

При CSR HTML собирается в браузере после выполнения JS, при SSR — на сервере, так что поисковик и пользователь сразу получают заполненную страницу.

Сайт на JS плохо индексируется? Найдём причину и дадим решение — SEO-аудит и исправление ошибок на сайте.

Похожие термины: Server-Side Rendering, JavaScript, Индексация, HTML, URL.