СРАВНЕНИЕ ОТРИСОВКИ САЙТА НА СТОРОНЕ КЛИЕНТА (CSR) И НА СТОРОНЕ СЕРВЕРА (SSR)

COMPARISON BETWEEN CLIENT-SIDE RENDERING (CSR) AND SERVER-SIDE RENDERING (SSR)

Maxim Beryanov

Student, PIKT faculty, ITMO University,

Russia, Saint-Petersburg

АННОТАЦИЯ

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

ABSTRACT

When choosing an approach for rendering a web page, developers need to understand the difference between possible options so as not to degrade the performance of their web application. This article will compare client-based and server-based rendering.

Ключевые слова: веб, страница, отрисовка, JavaScript.

Keywords: web, page, rendering, JavaScript.

Можно вспомнить давнюю эпоху, когда на большинстве веб-страниц отображался только статический контент – в то время веб-страница представляла собой обычную веб-страницу с небольшим интерактивным режимом или вообще его не имела. В то время единственной мотивацией для размещения таких сайтов было предоставление информации о компании и ее продуктах и привлечение потенциальных клиентов. Таким образом, отрисовка (рендеринг) на стороне сервера была единственным способом отобразить HTML [1] на экране компьютера в браузере, то есть на сервере хранился определенный HTML-документ (возможно даже шаблон), и затем сервер преобразовывал его в полезное для пользователя представление по запросу.

Если перенестись в сегодняшний день, то такая картина мира претерпела потрясающие изменения – сегодня большинство веб-сайтов представляют собой не просто статические страницы, на которых отображается недвижимый контент. По сути, это полноценные приложения, которые только притворяются веб-сайтами – мы можем отправлять сообщения, искать информацию, делать покупки и выполнять многие другие действия. Вот почему отрисовка на стороне сервера постепенно начинает отходить на второй план и уступает все более широкому использованию методов рендеринга веб-страниц на стороне клиента. Но как решить, какой метод лучше? Как и в большинстве случаев в разработке программного обеспечения, все зависит от того, что мы планируем делать с веб-сайтом. Рекомендуется взвесить все «за» и «против», прежде чем решить, какой путь составления веб-сайта лучше.

Отрисовка на стороне сервера

В случае отрисовки на стороне сервера [2], когда пользователь делает запрос к веб-странице, сервер подготавливает HTML-страницу, извлекая пользовательские данные и отправляя их на компьютер пользователя через Интернет. Затем браузер интерпретирует содержимое и отображает страницу. Весь этот процесс извлечения данных из базы данных, создания HTML-страницы и отправки ее клиенту происходит не настолько долго и занимает миллисекунды.

Но если мы представим, что пользователь щелкает ссылку на странице, браузер снова отправляет запрос на сервер, и весь описанный выше процесс повторяется на стороне сервера – этот процесс не только увеличивает нагрузку на сервер, но и влияет на сеть, особенно если такие действия слишком активные (производятся, допустим, миллионом пользователей).

Отрисовка на стороне клиента

Рендеринг на стороне клиента [3] – достаточно новый подход к рендерингу веб-сайтов, и он не был популярным, пока разработчики не получили удобные инструменты в виде JavaScript-библиотек.

Когда мы говорим о рендеринге на стороне клиента, мы имеем в виду отрисовку контента (содержимого) в браузере с использованием JavaScript. Таким образом, вместо того чтобы каждый раз получать контент в виде готового HTML-документа, при загрузке сайта предоставляется единственный, можно сказать, пустой HTML-документ с сопроводительным скриптом на JavaScript [4], который в дальнейшем по событию загрузки страницы отображает (начинает построение) главной части сайта с помощью возможностей браузера.

При отрисовке на стороне клиента начальная загрузка страницы, естественно, немного медленная. Однако после этого каждая последующая загрузка новой страницы происходит очень быстро. При таком подходе связь с сервером происходит только для получения свежих данных во время работы с сайтом. Более того, нет необходимости перезагружать весь интерфейс после каждого обращения к серверу. JavaScript может обновлять пользовательский интерфейс с измененными данными, повторно отображая только конкретный обновленный DOM-элемент.

На сегодняшний день Angular [5] и React.js [6] являются одними из лучших примеров библиотек, используемых при рендеринге на стороне клиента.

Плюсы рендеринга на стороне сервера

• Поисковые системы могут сканировать сайт для улучшения SEO [7];
• Начальная загрузка страницы происходит быстрее;
• Отлично подходит для статических сайтов.

Минусы рендеринга на стороне сервера

• Частые запросы к серверу;
• Общий медленный рендеринг страницы;
• Полная перезагрузка страницы при переходе по ссылкам;
• Малые возможности взаимодействия пользователя c сайтом.

Плюсы рендеринга на стороне клиента

• Богатое взаимодействие пользователя с сайтом;
• Быстрая отрисовка сайта после начальной загрузки;
• Отлично подходит для веб-приложений;
• Огромный выбор JavaScript-библиотек.

Минусы рендеринга на стороне клиента

• Низкий SEO, если он не реализован правильно;
• Первоначальная загрузка может потребовать больше времени;
• Требуется использование тяжелых библиотек.

Когда использовать рендеринг на стороне сервера

• Приложение имеет очень простой пользовательский интерфейс с малым количеством страниц / функций;
• Приложение имеет небольшое количество динамических данных;
• Цель сайта предоставлять информацию больше для чтения, чем записи (редактирования / дополнения);
• Планируется малое число пользователей.

Когда использовать рендеринг на стороне клиента

• Приложение имеет очень сложный пользовательский интерфейс с множеством страниц/функций;
• Приложение богато большими и динамическими данными;
• Акцент делается на огромное количество посетителей.

Таким образом, рендеринг на стороне сервера подобен получению предварительно собранного без возможности его пересобрать конструктора, тогда как рендеринг на стороне клиента подобен получению разобранного конструктора, который нужно собрать самостоятельно. В зависимости от предпочтений бизнеса, разработчики (архитекторы) должны решить, какой способ отрисовки предпочесть для разрабатываемого сайта.

Список литературы:

1. Основы HTML [Электронный ресурс] URL: https://html5book.ru/osnovy-html (дата обращения: 04.01.2023).
2. Server Side Rendering [Электронный ресурс] URL: https://habr.com/ru/post/527310 (дата обращения: 04.01.2023).
3. Client Side Rendering [Электронный ресурс] URL: https://www.patterns.dev/posts/client-side-rendering (дата обращения: 04.01.2023).
4. JavaScript [Электронный ресурс] URL: https://www.javascript.com (дата обращения: 04.01.2023).
5. Angular [Электронный ресурс] URL: https://angular.io (дата обращения: 04.01.2023).
6. React.js [Электронный ресурс] URL: https://reactjs.org (дата обращения: 04.01.2023).
7. SEO [Электронный ресурс] URL: https://habr.com/ru/post/539042 (дата обращения: 04.01.2023).