Как работает клиентское приложение?
- Пользователь отправляет запрос на веб-сайт.
- Браузер загружает HTML, а затем JS. Тем временем пользователь видит символ загрузки.
- После того, как браузер получает JS, он отправляет API-запросы через AJAX для получения динамического контента и обрабатывает его для отображения окончательного контента.
- После ответа сервера окончательный контент отображается с использованием обработки DOM в браузере клиента.
Поскольку этот процесс включает получение и обработку данных на стороне клиента, этот процесс называется рендерингом на стороне клиента.
Визуализация на стороне клиента (CSR)
При рендеринге на стороне клиента в современных браузерах веб-сайты отправляют очень мало HTML-ответов на запросы на подключение. Этот HTML-ответ содержит коды JavaScript, составляющие содержимое страницы. Если эти коды JavaScript не выполняются, веб-сайт представляет собой пустую страницу. Браузер отображает эти файлы JavaScript, создает контент и представляет нам веб-страницу.
Проблемы в CSR
- SEO
Поисковые роботы Google плохо понимают JavaScript. Бот поисковой системы может обрабатывать только приложения, время загрузки которых составляет около 300–400 мс. Если загрузка занимает больше времени, бот Google видит пустую страницу.
2. Долгое время загрузки
Никто не любит ждать, пока появится контент. Тяжелые приложения часто слишком медленные, разочаровывающие и менее конкурентоспособные, если их не поддерживать должным образом.
Пользователи с устройствами средней ценовой категории или медленным подключением к Интернету определенно столкнутся с трудностями и, скорее всего, будут жаловаться на плохой UX.
Как работает серверное приложение?
- Пользователь отправляет запрос на веб-сайт.
- Сервер проверяет ресурс, компилирует и подготавливает HTML-контент после обхода серверных скриптов, лежащих на странице.
- Этот скомпилированный HTML отправляется в браузер клиента для дальнейшего рендеринга и отображения.
- Браузер загружает HTML и делает сайт видимым для конечного пользователя.
- Затем браузер загружает Javascript (JS) и, выполняя JS, делает страницу интерактивной.
Визуализация на стороне сервера ( SSR )
При рендеринге на стороне сервера вся нагрузка по получению динамического содержимого, преобразованию его в HTML в виде удобочитаемого HTML-ответа и отправке его в браузер лежит на сервере. Следовательно, этот процесс называется рендерингом на стороне сервера (SSR).
Преимущества — это SSR
- Поисковая оптимизация
- Оптимизация социальных сетей
- Производительность: страницы, отображаемые на стороне сервера, будут загружаться быстрее, если пропускная способность сети пользователя низкая.
- Пользовательский опыт
Вывод
Если у вас есть предложения, пожалуйста, дайте мне знать в разделе комментариев 🙋♂️
Спасибо!🖤
Пожалуйста, найдите Репозиторий GitHub для Java script Framework
Для рендеринга на стороне универсального сервера Angular
