Вводное руководство по пониманию клиентской VS. Рендеринг на стороне сервера

По моему опыту кодирования, я обнаружил, что дескрипторы рендеринга на стороне клиента и на стороне сервера постоянно используются. У них обоих есть аспекты, которые, как мне кажется, я интуитивно улавливаю и кажущиеся довольно ясными, но я хотел попытаться осмотреться и раскрыть некоторую более глубокую ясность того, что они собой представляют, и как выглядят их варианты использования! Поехали!

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

  • Ваш первоначальный запрос загружает страницу, макет, CSS, JavaScript (JS).
  • Часть или весь контент включен: вместо этого JS делает другой запрос, получает ответ (вероятно, в JSON) и генерирует соответствующий HTML (обычно с использованием библиотеки шаблонов, такой как React).
  • Для дальнейших обновлений страницы клиентский подход повторяет тот же процесс.

Пример жизненного цикла CSR:

  • Сервер отправляет ответ браузеру.
  • Браузер скачивает JS.
  • Браузер выполняет React = ›› Страница теперь доступна для просмотра и интерактивна.

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

  • При рендеринге на стороне сервера ваш первоначальный запрос загружает страницу, макет, CSS, JS && контент (HTML).
  • Обновления на стороне сервера не обязательно означают обновление страницы. Произойдет частичное обновление, позволяющее серверу выполнить рендеринг и вставить окончательный результат в DOM.

Пример жизненного цикла SSR:

  • Сервер отправляет готовый HTML-ответ браузеру.
  • Браузер отображает страницу, которая теперь доступна для просмотра, и браузер загружает JS.
  • Браузер выполняет React = ›страница теперь интерактивна.

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

  • Вы полагаетесь на то, что у пользователя будет быстрый компьютер, который сможет справиться с тяжелой работой движка браузера.
  • Для начальной загрузки может потребоваться больше времени, но она будет удобной для просмотра и интерактивной.
  • Клиент работает медленнее, чем на стороне сервера, потому что для него требуется загрузка большего количества Javascript, поэтому требуется больше JS для синтаксического анализа, требуется второй HTTP-запрос для загрузки содержимого, а затем больше JS для создания шаблона.
  • Снизить SEO, если не реализовано правильно.
  • В большинстве случаев требуется внешняя библиотека.

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

  • Частые запросы к серверу, которые могут вызвать узкие места с сайтами, которые очень интерактивны.
  • Общая медленная отрисовка страницы (полная перезагрузка страницы).
  • Взаимодействие с небогатым сайтом.

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

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

Преимущества рендеринга на стороне сервера

  • Наше представление появляется немного раньше, чем страница становится интерактивной.
  • Серверный ответ браузеру - это HTML-код вашей страницы, готовый к отображению.
  • Отлично подходит для поисковой оптимизации (SEO). Ваш контент присутствует еще до того, как вы его получите, поэтому поисковые системы могут его индексировать и эффективно сканировать.
  • Начальная загрузка страницы происходит быстрее.
  • Пустой страницы, которая может быть с CSR, не бывает с SSR.
  • Отлично подходит для статических сайтов (например, New York Times, подумайте о сайтах с большим объемом данных).

Случаи применения

Когда использовать SSR

  • Если вам нужна SEO для Yahoo и т. Д.
  • У вас уже есть работающее приложение для реагирования, вам нужна максимальная производительность и вы готовы платить за дополнительные ресурсы сервера.
  • Хорошо использовать для насыщенных текстом веб-приложений, таких как новостной веб-сайт (New York Times).

Не используйте SSR

  • Если ваше приложение React еще не завершено, сначала запустите его.
  • SEO в Google достаточно хорош (убедитесь, что Google сканирует ваш контент).
  • Ресурсы сервера ограничены, возможно, из-за небольшого бюджета или невозможности масштабирования.

Заключение

Мое погружение в изучение CSR и SSR научило меня, когда я решил, что выбрать, вам нужно оценить каждую ситуацию и взвесить потребности вашего проекта. Это определенно не однозначное решение.

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

Конечно, всегда будут свои плюсы и минусы!

Что ты думаешь?

Вы склоняетесь к использованию одного (CSR) по сравнению с другим (SSR)?

Больше контента на plainenglish.io