Для чего используется CSR (Client-Side Rendering) в веб-разработке?

CSR (Client-Side Rendering) — это архитектурный подход, при котором браузер загружает минимальный HTML-каркас, а затем JavaScript (обычно фреймворк вроде React, Vue или Angular) динамически строит и обновляет интерфейс на стороне клиента.

Основное применение в Node.js-экосистеме:

• Создание SPA (Single Page Applications) с использованием фреймворков (React, Vue, Angular), где Node.js выступает в роли API-сервера.
• Разделение фронтенда и бэкенда: Node.js-сервер отдаёт статику (JS-бандл) и предоставляет REST или GraphQL API, а клиентский код управляет рендерингом.

Пример типичного стека с Node.js:

1. Бэкенд (Node.js + Express):

   // server.js - API endpoint
   const express = require('express');
   const app = express();
   app.use(express.static('build')); // Отдача статичного React/Vue build
   
   app.get('/api/data', (req, res) => {
     res.json({ message: 'Data from Node.js API' });
   });
   app.listen(3000);

2. Фронтенд (React):

   // App.js - Клиентский компонент
   import { useState, useEffect } from 'react';
   
   function App() {
     const [data, setData] = useState(null);
     useEffect(() => {
       fetch('/api/data')
         .then(res => res.json())
         .then(setData);
     }, []);
     return <div>{data ? data.message : 'Loading...'}</div>;
   }

Преимущества:

• Быстрые переходы после загрузки приложения (нет полных перезагрузок страницы).
• Богатый, интерактивный UI.
• Чёткое разделение ответственности между клиентом и Node.js-сервером.

Недостатки:

• Медленная первоначальная загрузка (браузер должен скачать и выполнить весь JS).
• Проблемы с SEO для изначально пустой страницы (решаются гибридными подходами, например, Next.js).
• Полная зависимость от JavaScript в браузере.