Рендеринг на Клієнті (CSR)

Сторінки рендеряться на клієнті після завантаження JavaScript. Ідеально для SPAs, Ігор та Дашбордів, де інтерактивність є ключовою.

Сервер

🌐
Request
Response
🖥️
Сервер надсилає HTML/CSS/JS

Клієнт

Клієнт завантажує HTML/CSS/JS
React.mount()
render()
componentDidMount() / useEffect()
JavaScript отримує дані
Динамічний контент відрендерений на клієнті
Відрендерити UI
Переваги x Компроміси

Benefits

  • Багата Інтерактивність: Повна інтерактивність клієнта
  • Зменшення Навантаження Сервера: Мінімальна обробка сервера
  • Динамічні Оновлення: Оновлення контенту в реальному часі
  • Підтримка Офлайн: Працює без з'єднання з сервером

Trade-offs

  • Поганий початковий SEO: Пошукові системи бачать порожній HTML
  • Повільний TTFB: Контент завантажується після JavaScript
  • Високе використання CPU клієнта: Весь рендеринг на клієнті
  • Немає контенту без JavaScript: Ламається якщо JS вимкнено
Як реалізувати?

CSR використовує клієнтські компоненти з React hooks для інтерактивності.

"use client";

import { useState, useEffect } from "react";

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/data")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return <div>{data?.message}</div>;
}
  • Використовуйте директиву 'use client' на початку файлу
  • Компоненти можуть використовувати React hooks (useState, useEffect, тощо)
  • Отримання даних відбувається на клієнті
  • Ідеально для інтерактивних функцій та динамічних оновлень