Рендеринг на Сервері (SSR)

Сторінки рендеряться на сервері для кожного запиту. Ідеально для E-commerce, Профілів та додатків з даними в реальному часі, де свіжий та персоналізований контент є важливим.

Сервер

🌐
Request
Response
🖥️
Сервер отримує запит
Сервер отримує дані
React.renderToString()
Сервер надсилає відрендерений HTML

Клієнт

Клієнт отримує HTML
React.hydrate()
Сторінка інтерактивна
Переваги x Компроміси

Benefits

  • SEO Оптимізований: Пошукові системи можуть індексувати контент
  • Швидке Початкове Завантаження: HTML готовий одразу
  • Соціальний Шаринг: Багаті превью для соціальних мереж
  • Доступність: Працює без JavaScript

Trade-offs

  • Більше навантаження на сервер: Сервер обробляє кожен запит
  • Збільшена затримка: Сервер повинен рендерити перед відправкою
  • Більше ресурсів сервера: Потребує більше CPU/пам'яті
  • Повільніше при високому трафіку: Кожен запит потрапляє на сервер
Як реалізувати?

SSR використовує Server Components асинхронні. У App Router динамічний рендеринг є типовим для сторінок з динамічними даними.

export const dynamic = "force-dynamic";

export default async function ServerComponent() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

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