---
title: SSR и CSR
questionDates:
q-transfer-0436: '2026-10-01'
seo:
description: >-
Тема «SSR и CSR» для собеседования React Developer. Что такое SSR
(Server-Side Rendering) и как он отличается от CSR (Client-Side Rendering)?
Как передать данные с сервера на клиент при использовании SSR в React?
title: SSR и CSR — React Developer
---
[Все темы React Developer](/prep/react-developer)
## Что такое SSR (Server-Side Rendering) и как он отличается от CSR (Client-Side Rendering)? [#q-14bee738d69b817d9ef7d79191a04e36]
SSR (Server-Side Rendering) и CSR (Client-Side Rendering):
SSR (Server-Side Rendering):
- Рендеринг контента на сервере.
- HTML генерируется на сервере и отправляется в браузер.
- HTML с контентом доступен без ожидания клиентского рендера, что может ускорить показ страницы и упростить индексацию.
- Пример: Next.js.
CSR (Client-Side Rendering):
- Рендеринг контента на клиенте.
- HTML генерируется в браузере с помощью JavaScript.
- Для первого показа контента обычно нужны загрузка и выполнение JavaScript. Степень интерактивности не определяется выбором CSR или SSR.
- Пример: Create React App.
#### Основные отличия:
{/* prettier-ignore */}
- Производительность:
- SSR может ускорить показ контента, но зависит от времени ответа сервера и объёма клиентского JavaScript.
- CSR может задержать первый показ контента; скорость дальнейших переходов зависит от приложения и кеширования.
- SEO:
- SSR: Улучшенная SEO, так как контент доступен поисковым системам.
- CSR: Хуже для SEO, так как контент рендерится динамически.
- Сложность:
- SSR: Более сложная настройка и инфраструктура.
- CSR: Проще в настройке и развертывании.
:::note[Ссылки для изучения]
1. [Клиентский рендеринг React через createRoot](https://reactdev.ru/reference/react-dom/client/createRoot/)
1. [Серверный HTML React и последующая гидратация](https://reactdev.ru/reference/react-dom/server/renderToString/)
:::
---
## Как передать данные с сервера на клиент при использовании SSR в React? [#q-14bee738d69b81e59534ee525ec2a49d]
В Next.js Pages Router серверные данные можно передать странице через getServerSideProps. getInitialProps является устаревшим API. В App Router используют серверные компоненты и передают клиентским компонентам сериализуемые пропсы. Секреты и служебные данные в клиентские пропсы не включают.
#### Пример с getServerSideProps в Next.js:
1. Создайте страницу и реализуйте
getServerSideProps:
```jsx
import React from "react";
export async function getServerSideProps() {
// Получение данных на сервере
const res = await fetch("https://api.example.com/data");
const data = await res.json();
// Передача данных в компонент через пропсы
return { props: { data } };
}
const Page = ({ data }) => (
Server-Side Rendered Page
{JSON.stringify(data, null, 2)}
);
export default Page;
```
#### Пример с getInitialProps в Next.js (для классовых компонентов или старых версий Next.js):
1. Создайте страницу и реализуйте getInitialProps
:
```jsx
import React from "react";
class Page extends React.Component {
static async getInitialProps() {
// Получение данных на сервере
const res = await fetch("https://api.example.com/data");
const data = await res.json();
// Передача данных в компонент через пропсы
return { data };
}
render() {
const { data } = this.props;
return (
Server-Side Rendered Page
{JSON.stringify(data, null, 2)}
);
}
}
export default Page;
```
getServerSideProps выполняется на сервере; getInitialProps при первой загрузке выполняется на сервере, а при клиентских переходах может выполняться в браузере. Оба относятся к Pages Router.
:::note[Ссылки для изучения]
1. [Server Components: сериализуемые props на границе use client](https://reactdev.ru/reference/rsc/use-client/)
:::
---
## Что такое "реактивное программирование" (reactive programming) в контексте React? [#q-14bee738d69b81118f02fa5c90a4ef0e]
Реактивное программирование — это парадигма программирования,
ориентированная на асинхронные потоки данных и изменение состояния, где
реактивные системы автоматически обновляются в ответ на изменение данных.
#### В контексте React:
{/* prettier-ignore */}
1. Компоненты обновляются автоматически:
- Компоненты React автоматически перерисовываются в ответ на изменение состояния или пропсов.
1. Использование хуков:
- Хуки, такие как useState, useEffect, и useReducer, позволяют управлять состоянием и побочными эффектами, обеспечивая реактивное поведение.
```javascript
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Count has changed to ${count}`);
}, [count]);
```
1. Интеграция с библиотеками:
- Библиотеки, такие как RxJS, могут быть использованы для управления асинхронными потоками данных в приложениях React.
```jsx
import { useEffect } from 'react';
import { fromEvent } from 'rxjs';
const MyComponent = () => {
useEffect(() => {
const subscription = fromEvent(document, 'click').subscribe(() => {
console.log('Document clicked');
});
return () => subscription.unsubscribe();
}, []);
return Click anywhere in the document
;
};
```
Реактивное программирование в контексте React позволяет создавать приложения, которые автоматически реагируют на изменения данных и состояния, используя хуки и интеграцию с реактивными библиотеками, такими как RxJS.
:::note[Ссылки для изучения]
1. [Как изменение состояния запускает рендер и обновление DOM React](https://reactdev.ru/learn/render-and-commit/)
:::
---
## Почему возникает hydration mismatch в React? [#q-transfer-0436]
Hydration ожидает, что первый клиентский render создаст ту же разметку, что пришла с сервера. Расхождение вызывают `Date.now()`, случайные значения, locale или timezone, данные, изменившиеся между рендерами, неверная вложенность HTML и чтение `window` или `localStorage` во время render. Browser-only состояние переносят в effect либо передают серверный snapshot и используют одинаковые исходные данные. Ветвление по `typeof window` прямо в JSX часто создаёт разные деревья. `suppressHydrationWarning` применяют только к неизбежному локальному отличию и на ограниченном узле, а не как общее исправление.
:::note[Ссылки для изучения]
1. [hydrateRoot: причины несовпадения разметки и ограничение предупреждений](https://reactdev.ru/reference/react-dom/client/hydrateRoot/)
:::