Когда я недавно готовился к техническим собеседованиям, я наткнулся на концепцию рендеринга на стороне сервера (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 при неправильной реализации.
- Для начальной загрузки может потребоваться больше времени.
- В большинстве случаев требуется внешняя библиотека.
Заключение
Важно понимать различия между этими двумя подходами, а также их преимущества и недостатки, чтобы вы могли выбрать лучший подход для своего веб-сайта, поскольку это совсем не черно-белый выбор.