一般来说,普通的 Angular 应用是在 浏览器 中运行,在 DOM 中对页面进行渲染,并与用户进行交互。而 Angular Universal 是在 服务端 进行渲染(Server-Side Rendering,SSR),生成静态的应用程序网页,然后在客户端展示,好处是可以更快地进行渲染,在提供完整的交互之前就可以为用户提供内容展示。
本文是在 Angular 14 环境中完成,有些内容对于新的 Angular 版本可能并不适用,请参考 Angular 官方文档。
使用 SSR 的好处
对 SEO 更加友好
虽然现在包括 Google 在内的某些搜索引擎和社交媒体声称已经能支持对由 JavaScript(JS)驱动的 SPA(Single-Page Application)应用进行爬取,但是结果似乎差强人意。静态 HTML 网站的 SEO 表现还是要好于动态网站,这也是 Angular 官网所持有的观点(Angular 可是 Google 的!)。
Universal 可以生成无 JS 的静态版本的应用程序,对搜索、外链、导航的支持更好。
提高移动端的性能
某些移动端设备可能不支持 JS 或者对 JS 的支持非常有限,导致网站的访问体验非常差。这种情况下,我们需要提供无 JS 版本的应用,以便为用户提供更好的体验。
更快地展示首页
对于用户的使用体验来说,首页展示速度的快慢至关重要。根据 eBay 的数据,搜索结果的展示速度每提高 100 毫秒,“添加至购物车”的使用率就提高 0.5%。
使用了 Universal 之后,应用程序的首页会以完整的形态展示给用户,这是纯的 HTML 网页,即使不支持 JS,也可以展示。此时,网页虽然不能处理浏览器的事件,但是支持通过 routerLink
进行跳转。
这么做的好处是,我们可以先用静态网页抓住用户的注意力,在用户浏览网页的时候,同时加载整个 Angular 应用。这给了用户一个非常好的极速加载的体验。
为项目增加 SSR
Angular CLI 可以帮助我们非常便捷的将一个普通的 Angular 项目转变为一个带有 SSR 的项目。创建服务端应用只需要一个命令:
1 |
|
建议在运行该命令之前先提交所有的改动。
这个命令会对项目做如下修改:
-
添加服务端文件:
main.server.ts
- 服务端主程序文件app/app.server.module.ts
- 服务端应用程序主模块tsconfig.server.json
- TypeScript 服务端配置文件server.ts
- Express web server 的运行文件
-
修改的文件:
package.json
- 添加 SSR 所需要的依赖和运行脚本angular.json
- 添加开发、构建 SSR 应用所需要的配置
替换浏览器 API
由于 Universal 应用不是在浏览器中执行,因此一些浏览器的 API 或功能将不可用。例如,服务端应用是无法使用浏览器中的全局对象 window
、document
,navigator
,location
。
Angular 提供了两个可注入对象,用于在服务端替换对等的对象:Location
和 DOCUMENT
。
例如,在浏览器中,我们通过 window.location.href
获取当前浏览器的地址,而改成 SSR 之后,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
同样,对于在浏览器使用 document.getElementById()
获取 DOM 元素,在改成 SSR 之后,代码如下:
1 2 3 4 5 6 7 8 9 10 11 |
|
使用 URL 绝对地址
在 Angular SSR 应用中,HTTP 请求的 URL 地址必须为 绝对地址(即,以 http/https
开头的地址,不能是相对地址,如 /api/heros
)。Angular 官方推荐将请求的 URL 全路径设置到 renderModule()
或 renderModuleFactory()
的 options
参数中。但是在 v14 自动生成的代码中,并没有显式调用这两个方法的代码。而通过读 Http 请求的拦截,也可以达到同样的效果。
下面我们先准备一个拦截器,假设文件位于项目的 shared/universal-relative.interceptor.ts
路径:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
|
然后在 app.server.module.ts
文件中 provide 出来:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
这样任何对于相对地址的请求都会自动转换为绝对地址请求,在 SSR 的场景下不会再出问题。
Prerender 预渲染静态 HTML
经过上面的步骤后,如果我们通过 npm run build:ssr
构建项目,你会发现在 dist/<your project>/browser
下面只有 index.html
文件,打开文件查看,发现其中还有 <app-root></app-root>
这样的元素,也就是说你的网页内容并没有在 html 中生成。这是因为 Angular 使用了动态路由,比如 /product/:id
这种路由,而页面的渲染结果要经过 JS 的执行才能知道,因此,Angular 使用了 Express 作为 Web 服务器,能在服务端运行时根据用户请求(爬虫请求)使用模板引擎生成静态 HTML 界面。
而 prerender
(npm run prerender
)会在构建时生成静态 HTML 文件。比如我们做企业官网,只有几个页面,那么我们可以使用预渲染技术生成这几个页面的静态 HTML 文件,避免在运行时动态生成,从而进一步提升网页的访问速度和用户体验。
预渲染路径配置
需要进行预渲染(预编译 HTML)的网页路径,可以有几种方式进行提供:
1.通过命令行的附加参数:
1 |
|
2.如果路径比较多,比如针对 product/:id
这种动态路径,则可以使用一个路径文件:
routes.txt
1 2 3 4 |
|
然后在命令行参数指定该文件:
1 |
|
3.在项目的 angular.json
文件配置需要的路径:
1 2 3 4 5 6 7 8 9 10 11 |
|
配置完成后,重新执行预渲染命令(npm run prerender
或者使用命令行参数则按照上面<1><2>中的命令执行),编译完成后,再打开 dist/<your project>/browser
下的 index.html
会发现里面没有 <app-root></app-root>
了,取而代之的是主页的实际内容。同时也生成了相应的路径目录以及各个目录下的 index.html
子页面文件。
SEO 优化
SEO 的关键在于对网页 title
,keywords
和 description
的收录,因此对于我们想要让搜索引擎收录的网页,可以修改代码提供这些内容。
在 Angular 14 中,如果路由界面通过 Routes
配置,可以将网页的静态 title
直接写在路由的配置中:
1 |
|
另外,Angular 也提供了可注入的 Title
和 Meta
用于修改网页的标题和 meta 信息:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|