Разница между рендерингом на стороне сервера и рендерингом на стороне клиента

В веб-разработке для отображения контента на веб-странице используются два основных метода рендеринга: рендеринг на стороне сервера (SSR) и рендеринг на стороне клиента (CSR). Понимание разницы между этими двумя методами важно, когда речь идет о создании быстрых и эффективных веб-приложений. В этой статье мы подробно рассмотрим разницу между SSR и CSR на примерах.

Что такое рендеринг на стороне сервера (SSR)?

Рендеринг на стороне сервера (SSR) — это метод, при котором веб-страница визуализируется на сервере перед ее отправкой в браузер клиента. Это означает, что сервер генерирует код HTML, CSS и JavaScript для страницы и отправляет полный HTML-документ в браузер.

Когда пользователь запрашивает страницу, сервер обрабатывает запрос и создает полный HTML-документ. Затем этот документ отправляется в браузер клиента, который отображает его как веб-страницу. Браузер получает полностью сформированную страницу, что ускоряет начальную загрузку.

Пример рендеринга на стороне сервера (SSR)

Вот пример веб-страницы, отображаемой на стороне сервера, созданной с помощью Node.js и фреймворка Express.js:

// server.js

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./app.js');

const server = express();

server.get('/', (req, res) => {
  const content = ReactDOMServer.renderToString(<App />);
  const html = `
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="root">${content}</div>
      </body>
    </html>
  `;
  res.send(html);
});

server.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

В этом примере мы используем React для рендеринга нашего приложения на стороне сервера. Функция renderToString преобразует наши компоненты React в строки HTML. Затем мы встраиваем строку HTML в полный HTML-документ и отправляем его в браузер клиента.

Преимущества рендеринга на стороне сервера (SSR):

Лучшее время начальной загрузки: поскольку сервер отправляет полностью сформированный HTML-документ в браузер клиента, SSR может сократить время начальной загрузки страницы.
Улучшение SEO: поскольку боты поисковых систем предпочитают HTML-документы, SSR может улучшить рейтинг сайта в поисковых системах.
Повышение производительности на недорогих устройствах. Поскольку SSR переносит часть обработки на сервер, это может обеспечить более высокую производительность на недорогих устройствах.

Недостатки рендеринга на стороне сервера (SSR):

Повышенная нагрузка на сервер: поскольку сервер отвечает за отображение страницы, это может увеличить нагрузку на сервер, что может повлиять на производительность веб-сайта.
Ограниченная интерактивность: SSR не подходит для интерактивных веб-приложений, так как требует полной перезагрузки страницы для каждого взаимодействия.

Что такое рендеринг на стороне клиента (CSR)?

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

Когда пользователь запрашивает страницу, сервер отправляет минимальный HTML-документ и пакет JavaScript. Браузер загружает пакет JavaScript и использует его для отображения веб-страницы. Этот метод обычно используется в одностраничных приложениях (SPA), где содержимое страницы динамически обновляется в зависимости от взаимодействия с пользователем.

Пример рендеринга на стороне клиента (CSR)

Вот пример веб-страницы, отображаемой на стороне клиента, созданной с помощью React:

// index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>
// app.js

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

В этом примере мы используем React для рендеринга нашего приложения на стороне клиента. Мы создаем HTML-документ с элементом div, который будет использоваться для рендеринга нашего приложения. Мы также включаем пакет JavaScript, который содержит инструкции по отрисовке нашего приложения.

Когда браузер загружает документ HTML, он загружает пакет JavaScript и выполняет его.

Преимущества рендеринга на стороне клиента (CSR):

Лучшее взаимодействие с пользователем: CSR может обеспечить лучшее взаимодействие с пользователем для одностраничных приложений (SPA) за счет динамического обновления содержимого страницы без необходимости перезагрузки страницы.
Снижение нагрузки на сервер: поскольку сервер отвечает только за отправку исходного HTML-кода, CSR может снизить нагрузку на сервер, что может повысить производительность веб-сайта.
Лучшая поддержка современных веб-фреймворков: CSR лучше подходит для современных веб-фреймворков, таких как React и Angular.

Недостатки рендеринга на стороне клиента (CSR):

Более медленное время начальной загрузки: поскольку браузер клиента должен загрузить и выполнить JavaScript перед отображением страницы, CSR может привести к более медленному времени начальной загрузки.
Плохое SEO: поскольку боты поисковых систем имеют ограниченную поддержку JavaScript, CSR может негативно повлиять на рейтинг сайта в поисковых системах.
Низкая производительность на недорогих устройствах: поскольку CSR в значительной степени зависит от JavaScript, он может обеспечить низкую производительность на недорогих устройствах.

Заключение:

Рендеринг на стороне сервера (SSR) и рендеринг на стороне клиента (CSR) — это два разных метода, используемых для рендеринга веб-страниц. SSR используется для рендеринга страницы на сервере перед ее отправкой клиенту, а CSR используется для рендеринга страницы в браузере клиента с помощью JavaScript.

И SSR, и CSR имеют свои преимущества и недостатки. SSR может улучшить начальное время загрузки страницы, поскольку сервер отправляет полностью сформированный HTML-документ в браузер клиента. С другой стороны, CSR может обеспечить лучший пользовательский интерфейс для одностраничных приложений (SPA) за счет динамического обновления содержимого страницы без необходимости перезагрузки страницы.

Свяжитесь со мной в социальной сети

✅ Github: https://github.com/surksharathi
✅ LinkedIn: https://www.linkedin.com/in/suraksha-singh-88350472/
✅ Twitter: https ://twitter.com/SurakshaSogaria