Является ли Angular Universal все еще СПА? - PullRequest
Новая
       16

Является ли Angular Universal все еще СПА?

3 голосов
/ 04 июня 2019

Я прочитал несколько статей, некоторые из которых были официальная страница Angular Universal , введение здесь и т. Д.

Я не до конца понимаю- действительно ли сервер Angular Universal по-прежнему обслуживает ОДНУ страницу (огромный кусок html) или есть способ настроить Angular Universal для возврата НЕСКОЛЬКИХ страниц (одна часть приложения за раз) на основе маршрута (запрос / маршрут)?

Конечная цель - вернуть 404, если маршрут не существует (но это выходит за рамки этого вопроса, только для контекста).

Запутанная часть для меняздесь:

Это потому, что вместе с отрендеренным HTML на стороне сервера мы также отправим в браузер обычное клиентское приложение Angular.

Это клиентское приложение Angular будетзатем перехватите страницу, и с этого момента все будет работать как обычное одностраничное приложение, а это означает, что весь рендеринг во время выполнения будет происходить непосредственно на клиенте, как обычно.

Итак, что же такое the server-side rendered HTML?Это ВСЕ приложение предварительно отрендерено или оно каким-то образом относится к одному «маршруту» / представлению / чему-либо, что запрашивал пользователь?

Ответы [ 2 ]

5 голосов
/ 04 июня 2019

TL; DR

  • Angular Universal обслуживает вашу начальную страницу index.html как предварительно обработанный HTML-файл, так что у пользователя нет (длительного) времени ожидания.
  • Он также отправляет весь SPA вместе с начальным предварительно обработанным index.html.
  • . В то время как пользователь может сразу начать взаимодействовать с начальной страницей (например, index.html), SPA запускается при загрузке.фон.
  • Как только SPA завершает загрузку, он начинает обрабатывать пользовательские запросы.

Дискурс по SPA

Целью Angular и других подобных сред и / или библиотек (например, React) является то, что называется одностраничным приложением (SPA).SPA - это полноценное приложение, работающее внутри вашего браузера, которое самостоятельно отображает разные страницы, не взаимодействуя с внутренним сервером.В основном он связывается с внутренним сервером только в том случае, если запрашивает дополнительные данные, которые могут отображаться в SPA.

Начальная загрузка SPA может быть медленной

Хотя SPA действительноЭто исключает необходимость запрашивать файлы с внутреннего сервера каждый раз, когда пользователь переходит на другую страницу вашего веб-приложения, начальное время запуска SPA может быть очень медленным (в зависимости от компьютера клиента) и может привести кисходная пустая страница или индикатор загрузки, когда SPA запускается при загрузке.

Angular Universal

Чтобы исключить время ожидания для вашего пользователя, глядя на вращающуюся иконку загрузки или пробелстраница, Angular Universal предлагает возможность обслуживать начальную index.html страницу вашего приложения, предварительно выполнив ее рендеринг в бэкэнде.Кроме того, он отправляет Angular Application (ваше SPA) в браузер клиентов вместе с предварительно обработанным index.html.

Пример

Например, это может быть страница входа в приложение, предварительно обработанная в бэкэнде и предоставленная пользователю.В конце пользователь может сразу начать взаимодействовать со страницей входа в этом примере, пока ваш SPA все еще загружается в фоновом режиме браузера пользователя.И в тот момент, когда пользователь запоминает свои учетные данные, SPA завершил загрузку и обслуживает все будущие запросы пользователя.Таким образом, пользователь не должен смотреть на анимацию загрузки или пустую страницу и с меньшей вероятностью покинет вашу веб-страницу.

1 голос
/ 05 июня 2019

Да, приложение, созданное с использованием Angular Universal, по-прежнему является SPA. То, что отображается динамически, это просто страница, соответствующая вашему текущему маршруту, когда вы попадаете на ваш сайт, поэтому route/view/whatever. После, всякий раз, когда вы перемещаетесь по вашим маршрутам, это просто обычная угловая навигация SPA (вы фактически не обновляете всю страницу)

HTML, соответствующий этому маршруту, генерируется динамически с помощью angular universal и возвращается клиенту, обеспечивая SEO-дружественную и быструю страницу. Затем клиентское угловое приложение загружает и воспроизводит запросы API и создание компонентов, но при этом вы не получите пустую страницу.

Тем не менее, вы можете получить некоторое мерцание, когда клиентское приложение вступит во владение, но это можно решить, используя TransferState и другие методы

...