Вопрос проверяет понимание различий между серверным и клиентским рендерингом, что важно для выбора архитектуры веб-приложения.
SSR (Server-Side Rendering) и CSR (Client-Side Rendering) — это два подхода к рендерингу веб-страниц. В SSR HTML генерируется на сервере для каждого запроса, а в CSR — на клиенте с помощью JavaScript после загрузки страницы.
При 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 сервер отправляет минимальный 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 лучше для контентных сайтов, CSR — для динамических приложений. Часто используют гибридный подход (например, Next.js), чтобы получить преимущества обоих.
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию