Вводное руководство по пониманию клиентской 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