Angular Universal 还是 SPA 吗?

Is Angular Universal Still a SPA?

我看过几篇文章,其中一些是official Angular Universal page, an introduction here,等等

我不完全明白 - Angular 通用服务器是否仍然提供单个页面(html 的巨大 blob),或者有没有办法配置 Angular通用到 return 基于路由(请求/路由)的多个页面(一次应用程序的一部分)?

如果路由不存在,最终目标是 return 硬 404(但这超出了这个问题的范围,仅供参考)。

让我感到困惑的部分在这里:

This is because together with the server-side rendered HTML, we will also ship to the browser a normal client-side Angular Application.

This Angular client application will then take over the page, and from there on everything is working like a normal single page application, meaning that all the runtime rendering will occur directly on the client as usual.

那么,the server-side rendered HTML到底是什么?它是预呈现的整个应用程序,还是以某种方式特定于用户请求的 "route"/view/whatever?

TL;DR

  • Angular Universal 将您的初始 index.html 页面作为 pre-rendered html 文件提供,这样用户就无需(长时间)等待。
  • 它还会发送整个 SPA 以及初始 pre-rendered index.html
  • 虽然用户可以立即开始与初始页面交互(例如 index.html),但 SPA 正在后台启动。
  • 一旦 SPA 完成引导,它就会开始处理用户请求。

关于 SPA 的讨论

Angular 以及其他类似框架和/或库(例如 React)背后的意图是为称为单页应用程序 (SPA) 的东西提供服务。 SPA 是浏览器中的 fully-fledged 应用程序 运行,它可以在不与后端服务器交互的情况下自行呈现不同的页面。大多数情况下,它仅在请求可能显示在 SPA 中的其他数据时才与后端服务器通信。

引导 SPA 可能很慢

虽然 SPA 真的很棒并且消除了每次用户导航到 Web 应用程序的另一个页面时从后端服务器请求文件的需要,但 SPA 的初始 start-up 时间可能非常慢(取决于客户端机器)并且可能会导致在 SPA 引导时出现初始空白页或加载指示器。

Angular 通用

为了减少用户查看旋转的加载图标或空白页面的等待时间,Angular Universal 提供了通过 [=57] 提供应用程序初始 index.html 页面的可能性=] 它在后端。此外,它还会将 Angular 应用程序(您的 SPA)与 pre-rendered index.html 一起发送到客户端浏览器。

例子

例如,这可能是您的应用程序的登录页面,它在后端 pre-rendered 并提供给用户。最后,用户可以立即开始与此示例登录页面中的交互,而您的 SPA 仍在用户浏览器的后台启动。并且在用户记住他的凭据时,SPA 已完成引导并为用户的所有未来请求提供服务。因此,用户不必盯着加载动画或空白页面,也不太可能放弃您的网页。

是的,使用 angular 通用渲染的应用仍然是 SPA。动态渲染的只是你到你网站时当前路由对应的页面,所以route/view/whatever。之后,无论何时您在路线中导航,都只是正常的 SPA angular 导航(您实际上并没有刷新整个页面)

对应于该路由的html 是动态生成的angular 通用并返回给客户端,确保SEO 友好和快速的页面。客户端 angular 应用程序然后引导并重播 API 请求和组件创建,但在它发生时您不会得到空白页面。

当客户端应用程序接管时,您可能会得到一些 'flicker',但这可以使用 TransferState 和其他技术解决