Client-Side Rendering (CSR) — это подход к рендерингу, при котором сервер отдаёт минимальный HTML-каркас, а весь интерфейс и основная логика формируются уже в браузере пользователя с помощью JavaScript. Браузер загружает скрипты, выполняет код и строит DOM на клиенте.
Главное преимущество CSR — интерактивность после инициализации. Интерфейс начинает работать плавно и отзывчиво: легко реализуются сложные виджеты, динамическая персонализация и переходы без перезагрузки страницы.
Однако за эту гибкость приходится платить — основная нагрузка по построению интерфейса ложится на устройство пользователя 😐
Пока браузер скачивает, парсит и выполняет JavaScript, страница может либо отображаться частично, либо оставаться «белой». Даже если UI уже виден, он часто остаётся слабо интерактивным: клики и ввод обрабатываются с задержкой. Особенно заметно это на слабых устройствах и в медленных сетях. ☹️
Стоит отметить влияние CSR на индексирование и предпросмотр. Если значимая часть контента формируется только на клиенте, поисковым системам и социальным сетям сложнее корректно проанализировать страницу и сформировать сниппеты.
Как итог, CSR лучше всего подходит для приложений с богатой интерактивностью — дашбордов, админ-панелей и внутренних сервисов, где пользователь проводит много времени и ценит плавность работы после загрузки. 👍
Для контентных и маркетинговых страниц чаще выбирают другие подходы, о которых поговорим чуть позже 😉
Чтобы снизить влияние недостатков CSR, обычно используют:
⏺️ разбиение бандлов,
⏺️ ленивую загрузку кода,
⏺️ и, конечно, внимательно следят за объёмом и временем выполнения JavaScript.
Именно такие оптимизации позволяют сохранить гибкость клиентского рендеринга, не жертвуя пользовательским опытом. 👍