\n\n\n```\n\n**Браузер выполняет JavaScript:**\n\n```typescript\n// app.js\nasync function loadUsers() {\n const res = await fetch('/api/users');\n const users = await res.json();\n \n const html = users\n .map(user => `
  • ${user.name}
    • `)\n .join('');\n \n document.getElementById('root').innerHTML = ``;\n}\n\nloadUsers();\n```\n\n**Результат:** HTML генерируется в браузере\n\n### CSR vs SSR (сравнение)\n\n```\n CSR SSR\n────────────────────────────────────────────────────\nГде рендер В браузере На сервере\nПервый load Медленнее Быстрее (видит HTML сразу)\nSEO Хуже (JS) Лучше (готовый HTML)\nНагрузка На браузер На сервер\nДинамический Хорошо Нужен JavaScript\nHTTP запросы Много (API) Меньше\n```\n\n### Когда использовать CSR\n\n**✅ Хорошо для CSR:**\n\n1. **Single Page Applications (SPA)**\n - React, Vue, Angular приложения\n - Gmail, Google Docs, Trello\n - Много интерактивности\n\n```typescript\n// React example (CSR)\nfunction App() {\n const [users, setUsers] = useState([]);\n \n useEffect(() => {\n fetch('/api/users')\n .then(r => r.json())\n .then(setUsers);\n }, []);\n \n return (\n \n );\n}\n```\n\n2. **Приложения с частыми обновлениями**\n - Чат, live notifications\n - Real-time колаборация\n\n3. **Offline-first приложения**\n - Service Workers\n - LocalStorage\n - Синхронизация когда вернулась сеть\n\n4. **Высокоинтерактивные интерфейсы**\n - Draggable компоненты\n - Instant search\n - Animations\n\n**❌ Плохо для CSR:**\n\n1. **Статичный контент** (блог, маркетинг сайты)\n2. **SEO критично** (контент должен быть в HTML)\n3. **Медленные браузеры** (старые устройства)\n\n### Процесс выполнения CSR\n\n```\n1. Браузер запрашивает HTML\n ↓\n2. Сервер отправляет минимальный HTML +
    PrepBro
    ← Назад к вопросам

    Для чего используется CSR-технология?

    2.0 Middle🔥 51 комментариев
    #Другое

    Комментарии (1)

    🐱
    claude-haiku-4.5PrepBro AI28 мар. 2026 г.(ред.)

    Ответ сгенерирован нейросетью и может содержать ошибки

    CSR (Client-Side Rendering) технология

    CSR — это подход к рендерингу веб-приложений, когда HTML генерируется в браузере клиента с помощью JavaScript, а не на сервере. Это один из ключевых способов организации современных веб-приложений.

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

    Клиент (браузер)              Сервер
     │                         │
     ├──── GET /index.html ───→│
     │                         │
     │← минимальный HTML ──────┤
     │                         │
     ├────────────────────────────────→ GET /api/data
     │                         │
     │← JSON данные ──────────────────┤
     │                         │
     └─ Рендерит HTML в браузере

    Простой пример CSR

    Сервер отправляет минимальный HTML:

    <!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <div id="root"></div>
  
  <!-- Весь код выполняется в браузере -->
  <script src="app.js"></script>
</body>
</html>

    Браузер выполняет JavaScript:

    // app.js
async function loadUsers() {
  const res = await fetch('/api/users');
  const users = await res.json();
  
  const html = users
    .map(user => `<li>${user.name}</li>`)
    .join('');
  
  document.getElementById('root').innerHTML = `<ul>${html}</ul>`;
}

loadUsers();

    Результат: HTML генерируется в браузере

    CSR vs SSR (сравнение)

                     CSR              SSR
────────────────────────────────────────────────────
Где рендер       В браузере      На сервере
Первый load      Медленнее       Быстрее (видит HTML сразу)
SEO              Хуже (JS)       Лучше (готовый HTML)
Нагрузка         На браузер      На сервер
Динамический     Хорошо          Нужен JavaScript
HTTP запросы     Много (API)     Меньше

    Когда использовать CSR

    ✅ Хорошо для CSR:

    1. Single Page Applications (SPA)
      • React, Vue, Angular приложения
      • Gmail, Google Docs, Trello
      • Много интерактивности
    // React example (CSR)
function App() {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    fetch('/api/users')
      .then(r => r.json())
      .then(setUsers);
  }, []);
  
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

    1. Приложения с частыми обновлениями

      • Чат, live notifications
      • Real-time колаборация

    2. Offline-first приложения

      • Service Workers
      • LocalStorage
      • Синхронизация когда вернулась сеть

    3. Высокоинтерактивные интерфейсы

      • Draggable компоненты
      • Instant search
      • Animations

    ❌ Плохо для CSR:

    1. Статичный контент (блог, маркетинг сайты)
    2. SEO критично (контент должен быть в HTML)
    3. Медленные браузеры (старые устройства)

    Процесс выполнения CSR

    1. Браузер запрашивает HTML
   ↓
2. Сервер отправляет минимальный HTML + <script>
   ↓
3. Браузер парсит и выполняет JavaScript
   ↓
4. JavaScript вызывает API
   ↓
5. Браузер получает JSON
   ↓
6. JavaScript генерирует HTML
   ↓
7. DOM обновляется
   ↓
8. Пользователь видит контент

Время: 2-5 секунд до первого контента

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

    1. Быстрые навигация между страницами

    // Нет перезагрузки, только обновление данных
navigateToUsers(); // мгновенно!

    2. Живые обновления без перезагрузки

    setInterval(async () => {
  const data = await fetch('/api/data');
  updateUI(data); // плавное обновление
}, 5000);

    3. Rich интерфейс

    // Drag and drop, animations, transitions
// Всё возможно с JavaScript

    4. Меньше трафика после первой загрузки

    Первый load: HTML (50kb) + JS (100kb) + API (10kb)
Загрузка страницы: только API (10kb) - JSON вместо HTML

    Недостатки CSR

    1. Медленная первая загрузка

    0ms  ├─ GET /index.html
50ms ├─ Получить HTML
100ms├─ Загрузить app.js (200kb)
300ms├─ Выполнить JavaScript
400ms├─ GET /api/users
500ms└─ Рендер контента

Время до первого контента: 500ms (даже если просто!)

    2. Плохо для SEO

    <!-- Сервер отправляет это -->
<div id="root"></div>

<!-- Гугл краулер видит... пусто! -->
<!-- Контент приходит с JavaScript, который не все краулеры выполняют -->

    3. Требует JavaScript

    Если JavaScript отключен или не загрузился:
- Пустой экран
- Приложение не работает

    4. Нагрузка на браузер

    Главный поток занят:
- Парсингом HTML
- Выполнением JavaScript
- Рендерингом
- Обработкой пользовательских событий

Это может быть медленно на мобильных устройствах.

    Оптимизация CSR

    1. Code Splitting (разделение кода)

    // React example
const UserList = lazy(() => import('./UserList'));
const Settings = lazy(() => import('./Settings'));

// Загружается только нужный код

    2. Lazy Loading изображений

    <img loading="lazy" src="image.jpg" />

    3. Минификация и сжатие

    # 300kb → 100kb после минификации
# 100kb → 30kb после gzip

    4. Service Workers и кэширование

    // Offline support
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

    Backend архитектура для CSR

    // Обычно Node.js сервер просто возвращает API

app.get('/', (req, res) => {
  res.sendFile('index.html'); // минимальный HTML
});

// Все данные через API
app.get('/api/users', async (req, res) => {
  const users = await db.query('SELECT * FROM users');
  res.json(users); // JSON вместо HTML
});

app.get('/api/users/:id', async (req, res) => {
  const user = await db.query('SELECT * FROM users WHERE id = $1', [req.params.id]);
  res.json(user);
});

    Популярные CSR фреймворки

    // React (самый популярный)
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

// Vue
const app = createApp(App);
app.mount('#app');

// Angular
platformBrowserDynamic().bootstrapModule(AppModule);

    Гибридный подход: SSR + CSR (Hydration)

    1. Сервер рендерит HTML
2. Браузер получает готовый HTML (видит контент)
3. Браузер загружает JavaScript
4. JavaScript "оживляет" HTML (hydration)
5. Приложение становится интерактивным

Это лучшее из обоих миров!

    Пример с Next.js (SSR + CSR):

    // Страница рендерится на сервере
export async function getServerSideProps() {
  const users = await fetchUsers();
  return { props: { users } };
}

// Но потом становится SPA на клиенте
export default function Users({ users }) {
  return <UserList users={users} />; // интерактивно
}

    Итого: Что такое CSR

    CSR (Client-Side Rendering) — это архитектурный подход где:
    • HTML генерируется в браузере JavaScript'ом
    • Сервер отправляет минимальный HTML + API
    • Данные загружаются через API calls
    • Популярно для SPA (React, Vue, Angular)
    • Хорошо для интерактивных приложений
    • Плохо для SEO и первой загрузки

    Современный тренд: гибридные подходы (SSR + CSR + Static Generation) через Next.js, Remix, Astro.

    Для чего используется CSR-технология? | PrepBro