Граница между Angular и Angular Universal - PullRequest
Новая
       66

Граница между Angular и Angular Universal

0 голосов
/ 29 декабря 2018

Я работаю с Angular 6.1.0.Проблема, которую я пробую в демонстрации на стороне сервера через официальный документ здесь .

Говорят, это угловой Универсальный смысл:

Обычный угловойПриложение выполняется в браузере, отображая страницы в DOM в ответ на действия пользователя.Angular Universal генерирует статические страницы приложений на сервере с помощью процесса, называемого серверным рендерингом (SSR).Вы можете легко подготовить приложение для рендеринга на стороне сервера, используя Angular CLI.

Теперь у меня есть угловое приложение, которое имеет несколько экранов и некоторый поток пользовательского интерфейса с взаимодействием с пользователем.Больше на PWA (Progressive Web App), чем на сайте.

Приложение содержит логины пользователя, которые полностью статичны и являются видом на посадку.Приложение содержит динамические представления, а также представления с диаграммами и представлениями, которым для вызова данных необходимо вызывать API.

Проблема, с которой я сталкиваюсь, заключается в том, что даже после gzip, --prod и почти всех вещей из множествавеб-сайтов время загрузки первого просмотра (входа в систему) составляет около 30-60 секунд.

Мои вопросы:

  1. Желательно ли использовать SSR, чтобы сделать статическую страницу входа пользователя в систему Сервером, отображаемым для быстрой загрузки приложения?
  2. ЕслиДа, мне нужно перенести все приложение Angular на Angular Universal?Если да, есть ли ссылка, по которой я могу перейти?

1 Ответ

0 голосов
/ 29 декабря 2018

Рендеринг на стороне сервера часто помогает сократить время до первоначального рендеринга.Как правило, вам не нужно сильно менять, чтобы добавить SSR в угловое приложение, но любой прямой доступ браузера apis / dom потребует рефакторинга к абстракциям, предоставляемым angular.Например, вам может понадобиться использовать объект Renderer2 (например: https://alligator.io/angular/using-renderer2/)

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

Следует иметь в виду, что если вы не используете проверку подлинности на основе файлов cookie, вы не сможете предварительно визуализировать страницы, требующие входа пользователя (как вы выиграли)у них нет информации о сеансе на стороне сервера)

Другой способ, с помощью которого можно улучшить время запуска приложения, - это ленивая загрузка функций / маршрутов. Подробнее об этом можно узнать здесь: https://angular.io/guide/lazy-loading-ngmodules

...