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

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

#Node.js и JavaScript#Архитектура и паттерны

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

🐱

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

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

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

SSR (Server-Side Rendering) — это технология, при которой HTML-страница полностью генерируется на сервере и отправляется клиенту как готовый HTML. Это контрастирует с CSR (Client-Side Rendering), где браузер получает пустой HTML и сам строит страницу через JavaScript.

Сравнение архитектур

Client-Side Rendering (CSR)

1. Браузер запрашивает страницу
   GET /

2. Сервер отправляет пустой HTML
   <html>
     <body>
       <div id="root"></div>
       <script src="bundle.js"></script>
     </body>
   </html>

3. Браузер загружает JavaScript
   bundle.js (mehrere MB)

4. JavaScript создает DOM динамически
   React.render(<App />, document.getElementById('root'))

5. Страница интерактивна

Server-Side Rendering (SSR)

1. Браузер запрашивает страницу
   GET /

2. Сервер ГЕНЕРИРУЕТ HTML полностью
   - Выполняет React компоненты
   - Получает данные из БД
   - Рендерит в HTML строку

3. Сервер отправляет готовый HTML
   <html>
     <body>
       <h1>Welcome, John</h1>
       <p>Your data: ...</p>
     </body>
   </html>

4. Браузер показывает страницу сразу

5. JavaScript для interactivity подгружается (hydration)

Как работает SSR в Node.js

Пример с React

// server.js
const express = require('express');
const React = require('react');
const { renderToString } = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
  // Получаем данные
  const user = { name: 'John', email: 'john@example.com' };
  
  // Создаем React компонент
  const appComponent = React.createElement(App, { user });
  
  // Рендерим в HTML строку
  const html = renderToString(appComponent);
  
  // Отправляем HTML клиенту
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000);

React компонент

// App.js
function App({ user }) {
  return (
    <div>
      <h1>Welcome, {user.name}!</h1>
      <p>Email: {user.email}</p>
      <button>Like</button>
    </div>
  );
}

module.exports = App;

Процесс SSR в деталях

Этап 1: Запрос на сервер

Браузер: GET /products/123

Этап 2: Обработка на сервере

app.get('/products/:id', async (req, res) => {
  // 1. Получение данных из БД
  const product = await db.query(
    'SELECT * FROM products WHERE id = $1',
    [req.params.id]
  );
  
  // 2. Получение дополнительных данных
  const reviews = await db.query(
    'SELECT * FROM reviews WHERE product_id = $1',
    [req.params.id]
  );
  
  // 3. Рендеринг React компонента
  const html = renderToString(
    <ProductPage product={product} reviews={reviews} />
  );
  
  // 4. Отправка HTML
  res.send(template(html));
});

Этап 3: HTML отправляется браузеру

<!DOCTYPE html>
<html>
  <head>
    <title>Product - Cool Laptop</title>
  </head>
  <body>
    <div id="root">
      <h1>Cool Laptop</h1>
      <p>Price: $999</p>
      <div>
        <h3>Reviews</h3>
        <div>Great product!</div>
        <div>Excellent quality</div>
      </div>
      <button>Add to Cart</button>
    </div>
    <script src="/bundle.js"></script>
  </body>
</html>

Этап 4: Hydration (гидратация)

// client.js
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import App from './App';

// Гидратация: React подхватывает готовый HTML
// и делает его интерактивным
const root = hydrateRoot(
  document.getElementById('root'),
  <App />
);

После гидратации:

HTML уже на странице
JavaScript добавляет обработчики событий
Страница становится интерактивной

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

1. SEO (Search Engine Optimization)

CSR: Гугл видит пустой HTML, не индексирует
SSR: Гугл видит полный HTML со всем контентом

Поисковые системы сразу получают полный контент и могут индексировать страницу.

2. Быстрая первоначальная загрузка (FCP)

CSR:
HTML загружен (100ms)
JavaScript загружен (2 сек)
Компоненты отрендерены (1 сек)
Пользователь видит страницу: 3+ сек

SSR:
HTML загружен (100ms)
Пользователь видит страницу: 100ms
(JavaScript подгружается в фоне)

3. Лучший пользовательский опыт

Пользователь видит контент сразу
Не видит пустую страницу
Не видит "loading spinner" на первый раз

4. Работает без JavaScript

Теоретически SSR может работать даже если
JavaScript отключен (для базовой функциональности)

Недостатки SSR

1. Нагрузка на сервер

// Каждый запрос требует работы сервера
app.get('/', (req, res) => {
  // Для каждого пользователя отдельный рендеринг
  const html = renderToString(<App />); // CPU интенсив
});

2. Увеличение задержки ответа

CSR: Сервер просто отправляет файлы (быстро)
SSR: Сервер должен генерировать HTML (медленнее)

3. Стейтфул приложение

// Сервер должен хранить сессии, если есть
app.get('/profile', (req, res) => {
  const user = req.session.user; // Требует сессии
  const html = renderToString(<Profile user={user} />);
});

Современные решения для SSR

Next.js (самый популярный)

// pages/products/[id].js
export async function getServerSideProps(context) {
  const { id } = context.params;
  const product = await fetchProduct(id);
  
  return {
    props: { product },
    revalidate: 60 // ISR - переводит каждые 60 сек
  };
}

export default function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

Nuxt.js (для Vue)

// nuxt.config.js
export default {
  ssr: true, // Включить SSR
  target: 'server' // Или 'static' для SSG
}

Гибридные подходы

Static Site Generation (SSG) - Pre-rendering

Вместо рендеринга на каждый запрос,
рендерируем ВСЕ страницы при сборке

Build time:
  npm run build
  -> Рендерируем все страницы
  -> Сохраняем в .html файлы

Request time:
  Браузер запрашивает /products/123
  -> Сервер отправляет pre-rendered /products/123.html

ISR (Incremental Static Regeneration)

// Next.js
export async function getStaticProps() {
  return {
    props: { data },
    revalidate: 3600 // Перестраивать каждый час
  };
}

Выбор между CSR, SSR, SSG

Случай	Рекомендация
Блог, новостной сайт	SSG (Static)
E-commerce, личный кабинет	SSR
SPA, dashboard	CSR
Маркетинг сайт	SSG + ISR

Итоги

SSR — это технология, при которой:

HTML генерируется на сервере перед отправкой клиенту
Нужны данные — сервер получает их из БД
Рендерится компонент — обычно React или Vue
HTML отправляется полностью готовым
Браузер гидратирует компонент для интерактивности

SSR обеспечивает SEO, быстрые первые загрузки и лучший UX, но требует больше ресурсов на сервере. Современные фреймворки (Next.js, Nuxt) упрощают работу с SSR и предлагают гибридные подходы (SSG, ISR).