Что такое Server-Side Rendering (SSR) — сравнение с Client-Side Rendering

Введение в понятие SSR

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

CSR: как это работает?

Давайте вспомним, как работает наш привычный CSR на React. Когда пользователь открывает страницу с приложением React:

1. Сервер отправляет клиенту минимальный HTML-файл, в который подключен JS-бандл.
2. Браузер загружает JS-бандл, запускает его, и уже потом React начинает рендерить компоненты на странице.
3. В результате пользователь видит контент только после того, как JavaScript выполнится.

SSR: магия начинается на сервере

В случае SSR всё немного иначе:

1. Пользователь делает запрос к серверу.
2. Сервер уже рендерит контент React-компонентов в HTML и отправляет его клиенту.
3. Клиент сразу видит готовый HTML (и, что важно, поисковые роботы тоже видят полностью загруженный контент).
4. После этого React "гидратирует" (hydration) страницу — подключает интерактивность и восстанавливает состояние приложения на клиенте.

А вот и простая иллюстрация для понимания:

           CSR                          SSR
Запрос -> Минимальный HTML       Запрос -> Полный HTML
       -> Загрузка JS            -> Загрузка HTML
       -> Рендер                 -> "Готовая страница"
       -> Готово!                -> Гидрация интерактивности

Преимущества и недостатки SSR

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

1. SEO (Search Engine Optimization)
   Поисковые роботы, такие как Google или Bing, не всегда отлично исполняют JavaScript. Если ваш контент генерируется на клиенте, они могут его просто не увидеть. С SSR мы показываем им уже готовую страницу, что улучшает видимость сайта.

2. Улучшение скорости начальной загрузки
   Представьте, что вы зашли на сайт с CSR и вместо контента видите "белый экран", пока грузится JavaScript. С SSR такой проблемы нет: пользователь сразу получает уже готовый HTML.

3. Улучшенная перцептивная производительность
   Да-да, та же самая "оптическая иллюзия" скорости. Благодаря уже рендеренному HTML, пользователю кажется, что страница загружается быстрее.

Недостатки SSR

1. Сложность настройки
   Вместо простого "отправь index.html и забудь" приходится разбираться с сервером, обработкой запросов и настройкой кеширования.

2. Повышенная нагрузка на сервер
   Если у вас высокая посещаемость, сервер должен обрабатывать больше запросов для рендеринга HTML, что может увеличить требования к ресурсам.

3. Ограничения функциональности
   Некоторые браузерные API, такие как window или document, на сервере недоступны. Код, использующий их, ломается без обработки условием вроде typeof window !== 'undefined'.

Сравнение SSR и CSR

Примеры использования SSR и CSR в реальных проектах

Когда выбрать SSR?

• Контент, зависящий от SEO: блоги, новостные порталы, информационные сайты.
• Высокая конкуренция за SEO-трафик. Например, вы продаёте керамическую плитку, и у конкурентов тот же товар.
• Глобальные проекты с большим количеством посетителей. Когда необходимо снижать время начальной загрузки.

Когда выбрать CSR?

• Приложения с внутренней логикой. Например, админ-панели (зачем SEO там?).
• Одностраничные интерактивные приложения (SPA), где ключевую роль играет динамическое взаимодействие пользователя.

Почему CSR недостаточно в современном мире

Исторический факт: CSR был королем эпохи "первая версия Facebook". Но со временем остались проблемы:

1. Пустая страница при открытии: пользователь ждёт, пока загрузится JS.
2. Недоступность для поисковиков: ваши страницы невидимы, если роботы не исполняют JavaScript.
3. Сложность индексации динамически загружаемых данных.

SSR решает эти проблемы, предлагая мгновенное наполнение страницы данными.

Реальные сценарии использования SSR

Представьте онлайн-магазин, в который пользователи заходят с поисковиков. Если приложение будет работать только через CSR, покупатели могут не увидеть товары в результатах поиска. С SSR сервер рендерит страницу товара, отправляет её покупателю и поисковым роботам. Результат? Высокая видимость, больше просмотров и выше продажи.

Для сравнения, CSR идеально подходит для внутренней CRM-системы, куда сотрудники заходят только через авторизацию. Здесь нет смысла заботиться об индексации и SEO.

Практика: маленький пример CSR и SSR

CSR (сперва отдаётся пустая страница):

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSR Example</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

SSR (страница сгенерирована сразу):

// server.js
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>SSR Example</title>
    </head>
    <body>
      <div id="root">${html}</div>
    </body>
    </html>
  `);
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

Теперь вы понимаете, что делает SSR таким привлекательным для приложений с упором на производительность и SEO. Мы разобрали, когда использовать SSR или CSR, затронули преимущества и недостатки и сделаем первый шаг с SSR в следующих лекциях, используя Next.js!

2

Задача

Модуль 3: React, 13 уровень, 0 лекция

Недоступна

Простой пример CSR

Простой пример CSR

Открыть