Angular 和 Angular 通用之间的决策边界

The dicision boundary between Angular & Angular Universal

我正在与 Angular 6.1.0 合作。我正在通过 official doc here.

在服务器端渲染上尝试演示的问题

他们说,这是 angular 普遍意义:

A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal generates static application pages on the server through a process called server-side rendering (SSR). You can easily prepare an app for server-side rendering using the Angular CLI.

现在我有一个 angular 应用程序,它有一堆屏幕和一些 UI 用户交互流程。 PWA (Progressive Web App) 而不是网站。

该应用程序包含完全静态的用户登录,并且是登陆视图。该应用程序包含动态视图以及带有图表的视图和需要调用 API 来获取数据的视图。

我面临的问题是,即使在 gzip--prod 和来自一堆网站的几乎所有内容之后,加载第一个视图(登录)所需的时间也是大约 30-60 秒。

我的问题是:

  1. 是否建议使用 SSR,使静态用户登录页面服务器呈现以便应用程序快速加载?
  2. 如果是,我是否需要将整个 Angular 应用程序移植到 Angular Universal?如果有,有没有什么可以关注的link?

服务器端渲染通常有助于加快初始渲染时间。通常,将 SSR 添加到 angular 应用程序无需进行太多更改,但任何直接访问浏览器 API / dom 都需要重构为 angular 提供的抽象。例如,您可能需要使用 Renderer2 对象(例如:https://alligator.io/angular/using-renderer2/

添加 SSR 的过程在您提供给官方文档的 link 中有很好的记录,并且也有各种关于它的博客文章 - 请注意过时的信息。

要记住的一件事是,除非您使用基于 cookie 的身份验证,否则您将无法预呈现需要用户登录的页面(因为您不会在服务器上获得他们的会话信息边)

您可以考虑用于缩短应用程序启动时间的另一个选项是延迟加载功能/路由。您可以在此处获得更多相关信息:https://angular.io/guide/lazy-loading-ngmodules