Давайте посмотрим, как современное веб-приложение отображается в браузере. Типичный ответ, отправленный приложением Angular, выглядит так:
Браузеры берут этот main.js
файл, анализируют и отображают наше приложение, это делает этот чистый HTML значимым. Но что, если пользователь отключит Javascript в своем браузере?
Что ж, он увидит это — пустую и мертвую страницу —
Но подождите? Шутки в сторону? Кто-то отключит Javascript в своем браузере в 2020 году? Кто такой тупой?
ну поисковые роботы тупые. Они будут. Когда они захотят проиндексировать нашу веб-страницу для результатов поиска, они найдут простой старый HTML-файл, в котором ничего нет, и большой main.js
файл, на который у них нет ни времени, ни уважения. Когда они увидят, что файл javascript слишком велик для анализа, они проигнорируют его. Таким образом, наше приложение Angular плохо работает с точки зрения SEO.
Какое решение?
мы можем использовать быстрое стороннее решение prerender.io. Он проверяет человека, который запросил вашу веб-страницу, является ли он ботом или человеком? Если это человек, он отправляет обычный ответ — обычный HTML с файлом main.js. Но если это бот, prerender.io сам открывает браузер, отображает приложение там и затем отправляет HTML-файлы с содержимым.
Таким образом, проблема SEO может быть решена. Но-
- Это не хороший способ
- Есть еще проблемы, которые нужно решить, первая осмысленная проблема с краской
Первая осмысленная отрисовка измеряет, когда основной контент страницы виден пользователю. На картинке ниже мы видим, что пользователю пришлось ждать 8 секунд, чтобы увидеть что-то значимое.
Большая часть этих 8 секунд использовалась для...
- Загрузите этот файл
main.js
, если у пользователя медленный интернет - это время увеличится. - Разберите и визуализируйте этот файл
main.js
.
И пользователь не видел ничего значимого на экране, недавнее исследование показывает, что пользователь покидает любую веб-страницу, загрузка которой занимает более 3 секунд.
Рендеринг на стороне сервера решает обе проблемы. Вместо того, чтобы отправлять мертвый пустой файл HTML, он отображает наше приложение на сервере (благословение Node.js) и отправляет HTML в браузер. Теперь пользователю не нужно ждать загрузки этого большого main.js
файла. Он может немедленно отображать HTML-код, отображаемый сервером. Таким образом, пользователь сможет увидеть какой-то значимый контент очень быстро.
Теперь давайте посмотрим, как работает этот SSR:
- Клиент делает запрос GET на сервер для веб-страницы
- Сервер немедленно анализирует и отображает HTML-файл.
- Клиент показывает этот HTML-код пользователю, пользователь видит осмысленный контент, но приложение еще не готово.
- Сервер также отправляет приложение angular/react (этот файл
main.js
) - Клиент загружает этот файл и загружает фон нашего приложения.
- Как только все будет готово на стороне клиента, он плавно переключается с отображения страниц, отображаемых на стороне сервера, на приложение на стороне клиента. Сервер передает управление клиенту, когда он готов.
Поскольку осмысленный HTML-код предоставляется пользователю немедленно, поэтому время первой осмысленной прорисовки значительно сокращается с помощью SSR.
В следующем посте мы узнаем, как реализовать рендеринг на стороне сервера с помощью Angular, следите за обновлениями.
Первоначально опубликовано наhttps://saadnoor.com 27 июля 2020 г.