Где произойдет первый рендер в SSR?

2.3 Middle🔥 201 комментариев

#JavaScript Core

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

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

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

Где произойдет первый рендер в SSR

SSR (Server-Side Rendering) - это процесс, где первый рендер происходит на сервере, а не в браузере. Понимание того, где и как происходит первый рендер, критично для оптимизации производительности и избежания гидрации проблем.

Архитектура SSR процесса

Uživatel -> Browser
           |
           v
    HTTP Request
           |
           v
   (На сервере)  <- ПЕРВЫЙ РЕНДЕР ПРОИСХОДИТ ЗДЕСЬ
   Node.js сервер
   |
   v
React.renderToString() или renderToStaticMarkup()
   |
   v
HTML строка
   |
   v
   HTTP Response (HTML)
           |
           v
    Browser получает HTML
           |
           v
Показать контент пользователю <- FCP (First Contentful Paint)
           |
           v
Загрузить JavaScript
           |
           v
   Hydration (гидрация)
           |
           v
Полностью интерактивный <- TTI (Time to Interactive)

Подробный процесс первого рендера на сервере

Шаг 1: Пользователь открывает URL

// Пользователь в браузере
window.location.href = 'https://example.com/products'

// Это отправляет GET запрос на сервер
GET /products HTTP/1.1
Host: example.com

Шаг 2: Сервер получает запрос

// На Node.js сервере (например, Next.js)
app.get('/products', (req, res) => {
  // Сервер здесь
  // Может получить данные из базы
  const products = await db.products.find();
  
  // Сервер подготавливает состояние для рендера
  const initialState = {
    products: products,
    loading: false
  };
  
  res.send(html);
});

Шаг 3: Рендер на сервере

// В этот момент происходит ПЕРВЫЙ РЕНДЕР

// Node.js не имеет DOM, используется виртуальный DOM React
import { renderToString } from 'react-dom/server';

const html = renderToString(
  <App initialState={initialState} />
);

// renderToString() выполняет:
// 1. Запускает React komponenty
// 2. Вызывает их render методы
// 3. Преобразует результат в HTML string

// Результат: обычная HTML строка без интерактивности
// <html><body><div id="root">...контент...</div></body></html>

Шаг 4: Отправка HTML в браузер

// Сервер отправляет полный HTML
res.send(`
  <!DOCTYPE html>
  <html>
    <head>
      <title>Products</title>
      <script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}</script>
    </head>
    <body>
      <div id="root">
        <!-- Здесь уже полный HTML контент, отрендеренный на сервере -->
        <div class="products-list">
          <div class="product">Product 1</div>
          <div class="product">Product 2</div>
          ...
        </div>
      </div>
      <script src="/bundle.js"></script>
    </body>
  </html>
`);

Шаг 5: Браузер получает и отображает HTML

// 1. Браузер парсит HTML (очень быстро)
// 2. Строит DOM дерево
// 3. Браузер может показать контент НЕМЕДЛЕННО (FCP достигнут!)

// На экране уже видно содержимое, хотя JavaScript не загружен
// Это преимущество SSR!

Шаг 6: Загрузка и выполнение JavaScript

// Браузер загружает bundle.js
// Это может быть большой файл (например, 200KB gzipped)
// Это время: от Loading JavaScript до Execution

Шаг 7: Hydration (гидрация)

// На клиенте React запускается с тем же initialState
import { hydrateRoot } from 'react-dom/client';

hydrateRoot(
  document.getElementById('root'),
  <App initialState={window.__INITIAL_STATE__} />
);

// Hydration:
// 1. React запускает компоненты на клиенте с тем же состоянием
// 2. Сравнивает результат с существующим DOM
// 3. Если совпадает - attach event listeners
// 4. Если не совпадает - hydration mismatch ошибка

// После hydration - сайт интерактивный (TTI достигнут)

Где именно происходит первый рендер

┌─────────────────────────────────────┐
│          БРАУЗЕР КЛИЕНТА            │
│                                     │
│  1. Парсинг HTML                    │
│  2. Запрос /bundle.js               │
│  3. Парсинг JS                      │
│  4. HYDRATION <- React вторично      │
│     рендеры компоненты              │
│                                     │
└─────────────────────────────────────┘
           ^                   ^
           |                   |
       FCP (~1s)           TTI (~3s)
        (контент видно)    (полная интерактивность)

┌─────────────────────────────────────┐
│        СЕРВЕР (Node.js)             │
│                                     │
│  1. Получить запрос GET /products   │
│  2. Получить данные из БД           │
│  3. RENDERTOSTRING <- ПЕРВЫЙ РЕНДЕР │
│     React.renderToString()          │
│  4. Отправить HTML                  │
│                                     │
└─────────────────────────────────────┘
      ^
      |
      v
Время: ~100-500ms (зависит от скорости БД)

Пример: Next.js SSR

// app/products/page.tsx (Next.js 13+)

// Это запускается НА СЕРВЕРЕ
export async function generateMetadata() {
  return { title: 'Products' };
}

// Это запускается НА СЕРВЕРЕ для каждого запроса
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 } // ISR
  });
  return res.json();
}

// Server Component (по умолчанию)
export default async function ProductsPage() {
  // Это выполняется на сервере
  const products = await getProducts();
  
  // Здесь происходит ПЕРВЫЙ РЕНДЕР
  return (
    <div>
      <h1>Products</h1>
      {products.map(p => (
        <ProductCard key={p.id} product={p} />
      ))}
    </div>
  );
}

// Client Component (если нужен)
'use client';
export function ProductFilter() {
  const [filter, setFilter] = useState('');
  // Это выполняется в браузере
  return <input value={filter} onChange={(e) => setFilter(e.target.value)} />;
}

Различные варианты рендера

1. Pure SSR (Server-Side Rendering)

Запрос -> Сервер выполняет рендер -> Браузер hydrate
Когда: каждый запрос
Время: медленнее (каждый раз рендерим)
Применение: часто обновляемый контент

2. SSG (Static Site Generation)

Сборка -> Сервер рендерит страницы -> Сохраняет HTML
-> На запрос просто отправляет статический HTML
Когда: при деплое
Время: очень быстро (уже готовый HTML)
Применение: блоги, документация, SEO-important страницы

3. ISR (Incremental Static Regeneration)

Первый запрос -> Сервер рендерит и кэширует
Следующие запросы (в течение TTL) -> кэшированный HTML
После TTL -> Перерендериваем в фоне
Применение: контент, который обновляется редко

4. Hybrid (Client Side + Server Side)

// Части страницы рендерятся на сервере
// Части рендерятся на клиенте

// Server-rendered (быстрый FCP)
<Layout>
  <Header />   {/* Server Component */}
  <Sidebar />  {/* Server Component */}
  
  {/* Client-rendered (интерактивный) */}
  <ClientComponent />
</Layout>

Проблемы SSR и их решения

Проблема 1: Hydration Mismatch

// Сервер рендерит одно, клиент другое

// ❌ ПЛОХО
function Component() {
  const [date, setDate] = useState(new Date().toISOString());
  return <div>{date}</div>; // Разная дата на сервере и клиенте!
}

// ✅ ХОРОШО
function Component() {
  const [mounted, setMounted] = useState(false);
  const [date, setDate] = useState('');
  
  useEffect(() => {
    setMounted(true);
    setDate(new Date().toISOString());
  }, []);
  
  if (!mounted) return null; // Пропуск на сервере, отображение на клиенте
  return <div>{date}</div>;
}

Проблема 2: Performance

// Если данные для рендера долго загружаются
// Весь сервер блокируется

// ✅ Использовать timeout
export const timeout = async () => {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 5000);
  
  try {
    return await fetch('/api/data', { signal: controller.signal });
  } catch (error) {
    // Показать fallback UI
    return null;
  } finally {
    clearTimeout(timeoutId);
  }
};

Проблема 3: Browser APIs

// localStorage, window, document - не существуют на сервере

// ❌ ОШИБКА
function Component() {
  const token = localStorage.getItem('token'); // Ошибка на сервере!
  return <div>{token}</div>;
}

// ✅ ПРАВИЛЬНО
function Component() {
  const [token, setToken] = useState<string | null>(null);
  
  useEffect(() => {
    setToken(localStorage.getItem('token'));
  }, []);
  
  return <div>{token}</div>;
}

Итоговая временная шкала SSR

T=0ms     | Пользователь кликает на ссылку
T=50ms    | DNS lookup
T=150ms   | TCP connection
T=250ms   | HTTP запрос на сервер
T=350ms   | Сервер обрабатывает запрос, получает данные из БД
T=450ms   | Сервер запускает React.renderToString()
T=500ms   | Сервер отправляет HTML
T=600ms   | Браузер получает HTTP response
T=650ms   | Браузер парсит HTML, строит DOM
T=700ms   | FCP - контент видно пользователю!
T=800ms   | Браузер загружает JavaScript (bundle.js)
T=1200ms  | JavaScript загружен и запущен
T=1300ms  | Гидрация (React присоединяет обработчики)
T=1350ms  | TTI - сайт полностью интерактивен!

В заключение: первый рендер в SSR происходит на сервере, преобразуя React компоненты в HTML строку, которая затем отправляется браузеру для отображения. Это дает быстрый FCP и улучшает SEO, но требует правильной гидрации для интерактивности.