Что такое Server-Side Rendering (SSR) и для чего он используется?react-35

Определение

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

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

Типичный процесс:

  1. Пользователь запрашивает страницу
  2. Сервер выполняет:
    • Загружает необходимые данные
    • Рендерит React-компоненты в HTML
    • Отправляет полностью готовую страницу клиенту
  3. Браузер получает готовый HTML и может сразу его отобразить
  4. Затем подгружается JavaScript ("гидратация"/hydration) для добавления интерактивности
// Пример простого SSR на Express.js
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';

const app = express();

app.get('/', (req, res) => {
  const html = renderToString(<App />);
  res.send(`
    <html>
      <head><title>SSR Example</title></head>
      <body>
        <div id="root">${html}</div>
        <script src="/client.js"></script>
      </body>
    </html>
  `);
});

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

  1. SEO (Search Engine Optimization) - поисковые системы лучше индексируют полностью сформированный HTML
  2. Первоначальная загрузка (Faster Initial Load) - пользователь видит контент быстрее, особенно на медленных устройствах
  3. Социальные превью (Social Media Previews) - корректное отображение при расшаривании ссылок
  4. Работа без JavaScript - базовый контент доступен даже при отключенном JS

Когда использовать SSR

  1. Контент-ориентированные сайты (блоги, новостные порталы)
  2. E-commerce площадки (где важны SEO и первоначальная загрузка)
  3. Приложения, где критична доступность контента

Реализации SSR в экосистеме React

  1. Next.js - наиболее популярное решение
  2. Gatsby - для статических сайтов с возможностью SSR
  3. Remix - современный фреймворк с упором на SSR
  4. Razzle - кастомизируемое решение

Проблемы SSR

  1. Сложность настройки - требуется серверная инфраструктура
  2. Серверная нагрузка - каждый запрос требует рендеринга
  3. Гидратация (Hydration Issues) - возможны несоответствия между серверным и клиентским рендерингом
  4. Работа с состоянием - сложнее управлять состоянием между сервером и клиентом

Пример с Next.js

// pages/index.js в Next.js - автоматически получает SSR
export default function Home({ serverData }) {
  return (
    <div>
      <h1>SSR Page</h1>
      <p>Data fetched on server: {serverData}</p>
    </div>
  );
}

export async function getServerSideProps() {
  // Выполняется на сервере для каждого запроса
  const res = await fetch('https://api.example.com/data');
  const serverData = await res.json();

  return { props: { serverData } };
}

Оптимизация SSR

  1. Кэширование (Caching) - кэшировать рендеренные страницы
  2. Incremental Static Regeneration (ISR) - гибрид SSR и статической генерации (Next.js)
  3. Streaming SSR - постепенная отправка HTML
  4. Selective Hydration - приоритезация гидратации важных компонентов

Резюмируем

SSR - мощная техника для улучшения SEO, производительности и UX, но требующая дополнительных серверных ресурсов. Для большинства проектов оптимально использовать готовые решения типа Next.js, которые упрощают реализацию SSR и предоставляют дополнительные оптимизации.

Вопросы

Собеседования