Давайте посмотрим, как современное веб-приложение отображается в браузере. Типичный ответ, отправленный приложением Angular, выглядит так:

Браузеры берут этот main.js файл, анализируют и отображают наше приложение, это делает этот чистый HTML значимым. Но что, если пользователь отключит Javascript в своем браузере?

Что ж, он увидит это — пустую и мертвую страницу —

Но подождите? Шутки в сторону? Кто-то отключит Javascript в своем браузере в 2020 году? Кто такой тупой?

ну поисковые роботы тупые. Они будут. Когда они захотят проиндексировать нашу веб-страницу для результатов поиска, они найдут простой старый HTML-файл, в котором ничего нет, и большой main.js файл, на который у них нет ни времени, ни уважения. Когда они увидят, что файл javascript слишком велик для анализа, они проигнорируют его. Таким образом, наше приложение Angular плохо работает с точки зрения SEO.

Какое решение?

мы можем использовать быстрое стороннее решение prerender.io. Он проверяет человека, который запросил вашу веб-страницу, является ли он ботом или человеком? Если это человек, он отправляет обычный ответ — обычный HTML с файлом main.js. Но если это бот, prerender.io сам открывает браузер, отображает приложение там и затем отправляет HTML-файлы с содержимым.

Таким образом, проблема SEO может быть решена. Но-

  1. Это не хороший способ
  2. Есть еще проблемы, которые нужно решить, первая осмысленная проблема с краской

Первая осмысленная отрисовка измеряет, когда основной контент страницы виден пользователю. На картинке ниже мы видим, что пользователю пришлось ждать 8 секунд, чтобы увидеть что-то значимое.

Большая часть этих 8 секунд использовалась для...

  1. Загрузите этот файл main.js, если у пользователя медленный интернет - это время увеличится.
  2. Разберите и визуализируйте этот файл main.js.

И пользователь не видел ничего значимого на экране, недавнее исследование показывает, что пользователь покидает любую веб-страницу, загрузка которой занимает более 3 секунд.

Рендеринг на стороне сервера решает обе проблемы. Вместо того, чтобы отправлять мертвый пустой файл HTML, он отображает наше приложение на сервере (благословение Node.js) и отправляет HTML в браузер. Теперь пользователю не нужно ждать загрузки этого большого main.js файла. Он может немедленно отображать HTML-код, отображаемый сервером. Таким образом, пользователь сможет увидеть какой-то значимый контент очень быстро.

Теперь давайте посмотрим, как работает этот SSR:

  1. Клиент делает запрос GET на сервер для веб-страницы
  2. Сервер немедленно анализирует и отображает HTML-файл.
  3. Клиент показывает этот HTML-код пользователю, пользователь видит осмысленный контент, но приложение еще не готово.
  4. Сервер также отправляет приложение angular/react (этот файл main.js)
  5. Клиент загружает этот файл и загружает фон нашего приложения.
  6. Как только все будет готово на стороне клиента, он плавно переключается с отображения страниц, отображаемых на стороне сервера, на приложение на стороне клиента. Сервер передает управление клиенту, когда он готов.

Поскольку осмысленный HTML-код предоставляется пользователю немедленно, поэтому время первой осмысленной прорисовки значительно сокращается с помощью SSR.

В следующем посте мы узнаем, как реализовать рендеринг на стороне сервера с помощью Angular, следите за обновлениями.

Первоначально опубликовано наhttps://saadnoor.com 27 июля 2020 г.