Логотип YeaHub

База вопросов

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

Тренажёр

База ресурсов

Обучение

Навыки

Задачи

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

AI info

Карта сайта

Документы

Медиа

Назад
Вопрос про JavaScript: SSR, CSR, server side rendering, client side rendering, rendering

Чем SSR отличается от CSR?

Вопрос проверяет понимание различий между серверным и клиентским рендерингом, что важно для выбора архитектуры веб-приложения.

Короткий ответ

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

Длинный ответ

Основное различие между SSR и CSR

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

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

При SSR сервер получает запрос, выполняет необходимую логику (например, запросы к базе данных), формирует полный HTML-документ и отправляет его браузеру. Браузер сразу отображает готовую страницу. Пример на Node.js с Express:

const express = require('express');
const app = express();
app.get('/', (req, res) => {
  const html = `<html><body><h1>Hello, SSR!</h1></body></html>`;
  res.send(html);
});
app.listen(3000);

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

При CSR сервер отправляет минимальный HTML-файл с ссылкой на JavaScript. Браузер загружает JS, который затем рендерит содержимое. Пример с React:

// index.html
<html><body><div id="root"></div><script src="app.js"></script></body></html>

// app.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello, CSR!</h1>, document.getElementById('root'));

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

  • SSR — для сайтов с высокими требованиями к SEO (например, интернет-магазины, блоги) и для улучшения времени первой загрузки (First Contentful Paint).
  • CSR — для приложений с богатым интерфейсом (например, дашборды, админки), где важна интерактивность после загрузки.

Вывод: SSR лучше для контентных сайтов, CSR — для динамических приложений. Часто используют гибридный подход (например, Next.js), чтобы получить преимущества обоих.

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Уровень

  • Рейтинг:

    5

  • Сложность:

    3

Навыки

  • JavaScript

    JavaScript

  • React

    React

Ключевые слова

#SSR

#CSR

#server side rendering

#client side rendering

#rendering

Подпишись на React Developer в телеграм

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию