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

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

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

С появлением динамических веб-сайтов и фреймворков javascript SSR начал уступать место более новому методу - CSR.

Давайте поговорим об обоих методах подробнее ...

Рендеринг на стороне сервера

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

Время между отправкой запроса клиентом и отправкой ответа сервером может зависеть от нескольких факторов, некоторые из них:

  • расположение сервера
  • скорость интернета
  • возможности веб-сервера (текущий трафик, способ написания веб-приложения и т. д.)

Плюсы SSR:

  • Начальная страница загружается быстрее
  • Лучше для поисковой оптимизации (SEO)
  • Отлично подходит для статических сайтов

Минусы SSR:

  • Частые запросы к серверу
  • Общая медленная отрисовка страницы

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

CSR - относительно новый подход, который приобрел популярность с появлением таких фреймворков, как Angular, React и Vue.js. Используя CSR, страницы отображаются непосредственно в браузере с использованием Javascript, а вся логика, такая как выборка данных, маршрутизация и т. Д., Обрабатывается клиентом. Сервер отправляет только шаблон веб-сайта, а ответственность за его содержание несет клиент. На этот раз, если пользователь переходит на другой маршрут, браузер будет использовать Javascript для загрузки нового контента вместо того, чтобы делать новый запрос к серверу, что делает его намного быстрее, поскольку мы не отображаем всю страницу. Тем не менее, этот подход не является дружественным к поисковой оптимизации (SEO), потому что контент не отображается до тех пор, пока страница не загружена, поэтому некоторые сканеры поисковых систем могут быть не в состоянии прочитать содержимое страницы.

Плюсы CSR:

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

Минусы CSR:

  • Низкое SEO при неправильной реализации.
  • Для начальной загрузки может потребоваться больше времени.
  • В большинстве случаев требуется внешняя библиотека.

Заключение

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