在 Angular 的应用开发中，单页应用 (Single Page Application, SPA) 已成为主流，而服务器渲染 (Server-Side Rendering, SSR) 则成为了提高网站性能和 SEO 的关键技术。本文将介绍 Angular 应用的服务器渲染实现技巧，包括预渲染、异步数据获取和优化应用性能。
什么是 Angular SSR
Angular SSR 意为 Angular 应用的服务器渲染，即通过服务器端将应用渲染成 HTML 返回给客户端，以提高页面的性能。相对于客户端渲染 (Client-Side Rendering, CSR)，服务器渲染可以提供更好的性能、可扩展性和可维护性。
Angular 官方提供了一个 Angular Universal 库，用于支持 Angular SSR，它提供了预渲染器和服务器端渲染器两种实现方式，其中预渲染器适用于静态内容的场景，而服务器端渲染器则适用于动态内容的场景。
Angular SSR 的优势
相对于 CSR，在 Angular SSR 中，浏览器先收到完整的 HTML 文档，其中包含了渲染好的首屏内容。这样可以减少浏览器的渲染时间和资源消耗，因此能提高页面呈现速度。此外，服务器渲染还能提高 SEO 搜索引擎优化得分，因为搜索引擎可以分析 HTML，而不必等待客户端渲染完成。
Angular SSR 实现技巧
1. 预渲染
预渲染是指将静态内容，在构建时 (Build Time) 通过编译器提前渲染成 HTML 文件，再将这些文件服务器到 CDN 上。这样，当浏览器请求这些文件时，Web 服务器就能以这些静态 HTML 文件作为响应，并将这些内容直接输出到浏览器端，无需即时渲染。
在 Angular 中，预渲染有两种方式，静态预渲染和动态预渲染。静态预渲染是在构建时，使用一个静态的 HTML 文件作为入口，然后将应用的静态页面全部预渲染成 HTML 文件。而动态预渲染则是在应用被访问时，才动态地将需要渲染的页面逐一生成。
静态预渲染的优势在于按需生成文件，文件相对更小，访问速度相对较快。不过，这种方式需要对应用的静态资源进行缓存，否则会导致请求次数较多、相应缓慢等问题。动态预渲染的优势在于不需要对静态资源进行缓存，对资源动态更新可以更细致、精确。
以下代码示例是如何启用 Angular 静态预渲染：
ng run myapp:prerender
2. 异步数据获取
Angular 应用被渲染时，有时需要根据用户的操作或网络请求等加载数据。服务器端渲染要求同步加载所有数据，在 Angular SSR 中，可以将异步加载改为同步加载以支持服务器端渲染。
export class AppComponent {
public message: string;
constructor(private http: Http) {
this.http.get('/api/data').subscribe(response => {
this.message = response.json().data;
});
}
}以上代码示例使用了 Angular 的 HttpClient，它负责异步获取数据，不适用于服务器渲染。因此我们需要使用 Angular 的 UniversalTransferStateModule，将请求的数据存储到 TransferState 实例中，在应用的另一侧再读取这些数据。
-- -------------------- ---- -------
------ ----- ------------ ---------- ------ -
------ -------- -------
------------
------- -------------- --------------
------- ----- -----
- --
---------- -
----- ---------- - --------------------------------
----- -------- - ---------------------------------- ------
-- ---------- -
------------ - ---------
- ---- -
--------------------------------------------- -- -
------------ - ---------------------
---------------------------------- --------------
---
-
-
-以上代码示例使用了两个 Angular 的内置服务 - TransferState 和 makeStateKey()，这样可以在客户端和服务器端共享数据传输状态。
3. 优化应用性能
在 Angular SSR 的应用中，为了提高应用性能，最好将所有必要的样式表内联到 HTML 文件中。这样应用在首次渲染时就不会引入外部样式表文件，从而提高渲染速度。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------
----- ---------
----- --------------- ---------------------------- -----------------
-------
-- - ----------------- ------- ---- --- --
----- -
-------- ------
-------- -----
-
-- -
---------- -----
------------ -----
-
--------
-------
------
---------------------
-------
-------除此之外，还可以启用 Angular 的预编译器 AOT (Ahead of Time) 来减少应用的加载时间、降低资源消耗、提高性能。
以上步骤都可以通过运行以下命令来构建 Angular SSR 应用：
ng run myapp:server ng build --prod
结论
在本文中，我们讨论了 Angular SSR 的实现技巧，其中包括预渲染、异步数据获取和性能优化等内容。为了让我们的应用更快、更健壮，我们必须采取这些技巧来提高应用的性能和 SEO 分数。如果你正在开发 Angular 应用并感兴趣于 SSR，那么务必要考虑利用这些技术，为你的应用带来更多好处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f1459d6fbf96019738edbd