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.
