Это метод рендеринга веб-страниц, при котором большая часть обработки и рендеринга контента происходит на стороне клиента, т.е. в браузере пользователя. В контексте веб-разработки, CSR обычно используется в одностраничных приложениях (Single Page Applications, SPA), где JavaScript играет ключевую роль в управлении содержимым и взаимодействиями на странице.
🚩Как работает
🟠Загрузка HTML
При первой загрузке страницы браузер получает минимальный HTML-код, обычно содержащий только базовую структуру и ссылку на JavaScript файл.
🟠Загрузка JavaScript
Основной JavaScript файл загружается и исполняется. Этот файл обычно содержит код приложения и необходимые библиотеки.
🟠Запросы к API
JavaScript код инициирует запросы к серверу (обычно через API) для получения данных, необходимых для отображения содержимого страницы.
🟠Рендеринг в браузере
Полученные данные используются для динамического создания и отображения контента непосредственно в браузере пользователя.
🚩Плюсы
➕Быстрое взаимодействие
После начальной загрузки, взаимодействие с приложением обычно быстрее, поскольку обновление контента происходит без полной перезагрузки страницы.
➕Плавный пользовательский опыт
Пользователь получает более плавный и интерактивный опыт, так как обновления происходят мгновенно без видимой перезагрузки страниц.
➕Гибкость и динамичность
CSR позволяет создавать более динамичные и интерактивные пользовательские интерфейсы, так как все управление происходит на клиентской стороне.
🚩Минусы
➖SEO и начальная загрузка
Так как основное содержание страницы рендерится на клиентской стороне, поисковым системам может быть сложнее индексировать такие страницы. Это может повлиять на SEO.
➖Долгое время начальной загрузки
Начальная загрузка страницы может занять больше времени, так как сначала загружается и исполняется JavaScript код, а затем уже происходит рендеринг контента.
➖Зависимость от JavaScript
Пользователи с отключенным JavaScript не смогут полноценно пользоваться сайтом. Также могут возникать проблемы с производительностью на слабых устройствах.
🚩Пример
Минимальный HTML
<!DOCTYPE html>
<html>
<head>
<title>My React App</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
JavaScript рендеринг
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Ставь 👍 и забирай 📚 Базу знаний