Ответ
SSR (Server-Side Rendering) — это архитектурный подход, при котором HTML-страница генерируется на сервере (в нашем случае, в Node.js-приложении) и отправляется клиенту уже в готовом для отображения виде. Это контрастирует с CSR (Client-Side Rendering), где браузер получает почти пустой HTML и весь рендеринг выполняется JavaScript'ом на стороне клиента.
**Как это работает в Node.js-стеке:**
1. **Запрос:** Пользователь запрашивает URL в браузере.
2. **Обработка на сервере:** Запрос попадает в Node.js-приложение (например, на Express.js или Fastify).
3. **Сбор данных:** Серверное приложение может выполнять асинхронные операции: запросы к API, базам данных (через TypeORM/Prisma), кэшам (Redis).
4. **Рендеринг:** Используя JavaScript-фреймворк (React, Vue, Svelte) и его серверные API (`renderToString`, `renderToNodeStream`), приложение генерирует HTML-строку, в которую уже встроены полученные данные.
5. **Отправка ответа:** Сервер отправляет клиенту полный HTML-документ, включая этот сгенерированный контент, а также ссылки на клиентский JavaScript-бандл.
6. **Гидратация (Hydration):** На клиенте загружается тот же самый JavaScript-бандл. Он «оживляет» статический HTML, присоединяя обработчики событий и делая приложение интерактивным.
**Базовый пример SSR с Express и React:**
```javascript
// server.js (Node.js сервер)
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './client/App.js'; // Корневой React-компонент
const app = express();
app.use(express.static('public')); // Раздаем статику (клиентский JS)
app.get('*', async (req, res) => {
// 1. Сбор данных для конкретного роута (например, с API)
const userData = await fetchUserData(req.path);
// 2. Рендеринг React-дерева в HTML-строку с данными
const appHtml = renderToString(My SSR App
);
}
// Гидратация, если данные уже есть в window
const initialData = window.__INITIAL_DATA__;
const rootElement = document.getElementById('root');
if (rootElement) {
hydrateRoot(rootElement,
${appHtml}
`;
res.send(html);
});
app.listen(3000, () => console.log('SSR Server running on port 3000'));
```
```javascript
// client/App.js (Клиентский компонент для гидратации)
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
function App({ userData }) {
return (
