Ответ
**SSR (Server-Side Rendering)** — это подход, при котором конечный HTML-код страницы генерируется на сервере и отправляется браузеру уже в готовом для отображения виде.
**Сравнение с CSR (Client-Side Rendering):**
| Аспект | SSR | CSR (например, React без SSR) |
| :--- | :--- | :--- |
| **Генерация HTML** | На сервере | В браузере, с помощью JavaScript |
| **Первая отрисовка (FCP)** | Быстрая | Медленная (ждет загрузки JS) |
| **SEO** | Отличное (боты видят контент) | Проблематичное (боты могут не выполнять JS) |
| **Нагрузка на сервер** | Высокая | Низкая (сервер отдает статику) |
| **Интерактивность** | Может требовать гидратации | Высокая после загрузки |
**Пример реализации на Next.js (React):**
```jsx
// Страница будет срендерена на сервере при каждом запросе
export default function Page({ serverData }) {
return (
);
}
// Эта функция выполняется на сервере для каждого запроса
export async function getServerSideProps() {
const data = await fetchApiData(); // Запрос к API
return { props: { serverData: data } };
}
```
**Когда использовать SSR?**
* Для страниц, критичных для SEO (лендинги, блоги, каталоги).
* Когда важна максимально быстрая первая отрисовка на слабых устройствах.
* Для контента, который должен быть доступен без JavaScript.
**Современные фреймворки** (Next.js, Nuxt.js, SvelteKit) часто используют **гибридный подход**, комбинируя SSR для первоначальной загрузки и CSR для последующей интерактивности.
Данные с сервера
{serverData}