PrepBro
← Назад к вопросам

Как работает SSR-технология?

2.0 Middle🔥 141 комментариев
#React#Архитектура и паттерны

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

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

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

Как работает SSR-технология

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

Традиционный процесс (CSR - Client-Side Rendering)

Клиент (браузер)
     ↓
Загружает HTML: <html><body><div id="app"></div></body></html>
     ↓
Загружает JavaScript (app.js)
     ↓
Execution: React/Vue отрисовывает компоненты в DOM
     ↓
Пользователь видит контент

Проблемы CSR:

  • Пустой HTML исходный код (плохо для SEO)
  • Задержка перед отображением контента (TTFB хорош, но FCP плохой)
  • Больше нагрузки на браузер

SSR процесс (Server-Side Rendering)

Клиент → Request → Сервер
                     ↓
              Сервер отрисовывает:
              - Компоненты React/Vue
              - Выполняет логику
              - Генерирует HTML
                     ↓
Клиент ← Полный HTML ← Сервер
     ↓
Браузер отображает HTML сразу
     ↓
Загружает и выполняет JavaScript
     ↓
Hydration: React присоединяется к существующему DOM

Пример Next.js (самый популярный фреймворк для SSR)

// pages/blog/[id].js
export async function getServerSideProps(context) {
  const { id } = context.params;
  
  // Выполняется на сервере при каждом запросе
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();
  
  if (!post) {
    return { notFound: true };
  }
  
  return {
    props: { post }, // Передаём в компонент
    revalidate: 60   // ISR: переиндексирует каждые 60 сек
  };
}

export default function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

На сервере генерируется:

<article>
  <h1>Как работает SSR</h1>
  <p>SSR генерирует HTML на сервере...</p>
</article>

Hydration (Гидратация)

Critical шаг после загрузки HTML:

// Клиент получил готовый HTML
<div id="app">
  <button>Click me</button>
</div>

// JavaScript загружается
// React Hydration: присоединяется к существующему DOM
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// Вместо render() используем hydrate()
ReactDOM.hydrate(<App />, document.getElementById('app'));

// Теперь кнопка функциональна, события работают

Важное: Hydration должна произвести точно такой же DOM, иначе будут баги.

SSR vs CSR vs SSG

ПараметрSSRCSRSSG
Где рендеритсяСервер (каждый запрос)БраузерСервер (build time)
Скорость TTFBМедленнее (сервер работает)БыстрееБыстрее всего
Скорость FCPБыстроМедленноБыстро
SEO✅ Отличная❌ Плохая✅ Отличная
Динамический контент✅ Да✅ Да❌ Нет (статичный)
МасштабируемостьТребует мощного сервераМасштабируется простоМасштабируется просто
КэшированиеСложноВ браузере простоОчень просто (CDN)

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

Производительность:

  • Первая paint быстрее (HTML готов на сервере)
  • Браузер показывает контент, пока загружается JS
  • Меньше JavaScript для выполнения на клиенте

SEO:

<!-- CSR: пустой исходный код (плохо для ботов) -->
<html><body><div id="app"></div></body></html>

<!-- SSR: полный HTML с контентом -->
<html>
  <body>
    <h1>Title</h1>
    <meta name="description" content="...">
    <p>Content here...</p>
  </body>
</html>

Безопасность:

  • API ключи остаются на сервере
  • Логика обработки на сервере

Недостатки SSR

  • TTFB медленнее — сервер должен выполнить всю работу
  • Требует мощный сервер — каждый запрос требует обработки
  • Сложнее отлаживать — баги в hydration сложно ловить
  • Гидратация может зависнуть — если JS выполняется долго

Hybrid подход: Incremental Static Regeneration (ISR)

Next.js ISR объединяет SSR и SSG:

export async function getStaticProps(context) {
  const posts = await fetchPosts();
  
  return {
    props: { posts },
    revalidate: 60 // Регенерируй статичные страницы каждые 60 сек
  };
}

Процесс:

  1. Build time: генерируем статичные страницы
  2. Serving: отдаём кэшированный HTML (быстро)
  3. Background: каждые 60 сек регенерируем HTML
  4. На следующий запрос: отдаём обновленный контент

Практический пример: E-commerce

// Product page с SSR
export async function getServerSideProps({ params }) {
  // Получаем продукт из БД
  const product = await db.products.findById(params.id);
  
  // Проверяем доступность
  const availability = await checkInventory(product.id);
  
  return {
    props: {
      product,
      availability
    },
    // Кэшируем результат на 5 минут
    revalidate: 300
  };
}

// Генерируется:
<html>
  <head>
    <title>iPhone 15 - \$999</title>
    <meta property="og:image" content="...">
  </head>
  <body>
    <h1>iPhone 15</h1>
    <span>В наличии: 5 шт.</span>
    <button>Купить</button>
  </body>
</html>

Итог

SSR работает так:

  1. Клиент отправляет запрос
  2. Сервер выполняет логику, обращается к БД, отрисовывает компоненты
  3. Сервер отправляет готовый HTML
  4. Браузер отображает HTML сразу (быстрая first paint)
  5. Загружается JavaScript
  6. React hydrate присоединяется к DOM
  7. Приложение становится интерактивным

Используй SSR для:

  • Контента, требующего SEO (блоги, продукты)
  • Динамического контента, который часто меняется
  • Когда нужна максимальная скорость first contentful paint

Используй SSG (Static) для:

  • Статичного контента (документация, лендинги)
  • Максимальной производительности и масштабируемости