Проверяет понимание различий между клиентским и серверным рендерингом, их влияния на производительность и SEO.
Рендеринг — это процесс превращения кода в видимую страницу. В веб-разработке есть два основных подхода: клиентский (CSR) и серверный (SSR). Они определяют, где именно формируется HTML, который видит пользователь.
При CSR сервер отправляет браузеру пустую оболочку HTML и ссылку на JavaScript-бандл. Браузер загружает JS, выполняет его, и только тогда создаёт контент. Это основа Single Page Applications (SPA), например, приложений на React или Vue.
// Пример CSR: сервер отдаёт пустой div, React заполняет его
// index.html
<div id="root"></div>
<script src="bundle.js"></script>
// App.js
ReactDOM.render(<App />, document.getElementById('root'));Плюсы CSR: быстрая навигация после первой загрузки, меньше нагрузка на сервер, плавные переходы. Минусы: долгая первая загрузка, плохая индексация поисковиками, если не настроен prerendering.
При SSR сервер выполняет JavaScript-код, формирует полный HTML и отправляет его браузеру. Пользователь сразу видит готовую страницу, а JS подключается для интерактивности. Это используется в Next.js, Nuxt.js и классических серверных шаблонах.
// Пример SSR с Express и React
app.get('/', (req, res) => {
const html = ReactDOMServer.renderToString(<App />);
res.send(`<div id="root">${html}</div>`);
});Плюсы SSR: быстрый первый отрисовка, хорошее SEO, работает без JavaScript. Минусы: больше нагрузка на сервер, сложнее кэширование, задержка при каждом запросе.
Выбор между CSR и SSR зависит от задач. Для контентных сайтов с важным SEO выбирайте SSR. Для сложных интерактивных приложений, где важна скорость навигации, подойдёт CSR. Современные фреймворки позволяют комбинировать оба подхода, например, используя SSR для первых страниц и CSR для внутренних.
