Angular SSR 探究
<p>一般来说，普通的 Angular 应用是在 <em>浏览器</em> 中运行，在 DOM 中对页面进行渲染，并与用户进行交互。而 Angular Universal 是在 <em>服务端</em> 进行渲染（Server-Side Rendering，SSR），生成静态的应用程序网页，然后在客户端展示，好处是可以更快地进行渲染，在提供完整的交互之前就可以为用户提供内容展示。</p><blockquote>
<p>本文是在 Angular 14 环境中完成，有些内容对于新的 Angular 版本可能并不适用，请参考 Angular 官方文档。</p>
</blockquote>
<h2 id="使用-ssr-的好处">使用 SSR 的好处</h2>
<h3 id="对-seo-更加友好">对 SEO 更加友好</h3>
<p>虽然现在包括 Google 在内的某些搜索引擎和社交媒体声称已经能支持对由 JavaScript（JS）驱动的 SPA（Single-Page Application）应用进行爬取，但是结果似乎差强人意。静态 HTML 网站的 SEO 表现还是要好于动态网站，这也是 Angular 官网所持有的观点（Angular 可是 Google 的！）。</p>
<p>Universal 可以生成无 JS 的静态版本的应用程序，对搜索、外链、导航的支持更好。</p>
<h3 id="提高移动端的性能">提高移动端的性能</h3>
<p>某些移动端设备可能不支持 JS 或者对 JS 的支持非常有限，导致网站的访问体验非常差。这种情况下，我们需要提供无 JS 版本的应用，以便为用户提供更好的体验。</p>
<h3 id="更快地展示首页">更快地展示首页</h3>
<p>对于用户的使用体验来说，首页展示速度的快慢至关重要。根据 eBay 的数据，搜索结果的展示速度每提高 100 毫秒，“添加至购物车”的使用率就提高 0.5%。</p>
<p>使用了 Universal 之后，应用程序的首页会以完整的形态展示给用户，这是纯的 HTML 网页，即使不支持 JS，也可以展示。此时，网页虽然不能处理浏览器的事件，但是支持通过 <code>routerLink</code> 进行跳转。</p>
<p>这么做的好处是，我们可以先用静态网页抓住用户的注意力，在用户浏览网页的时候，同时加载整个 Angular 应用。这给了用户一个非常好的极速加载的体验。</p>
<h2 id="为项目增加-ssr">为项目增加 SSR</h2>
<p>Angular CLI 可以帮助我们非常便捷的将一个普通的 Angular 项目转变为一个带有 SSR 的项目。创建服务端应用只需要一个命令：</p>
<pre><code class="language-sh">ng add @nguniversal/express-engine
</code></pre>
<blockquote>
<p>建议在运行该命令之前先提交所有的改动。</p>
</blockquote>
<p>这个命令会对项目做如下修改：</p>
<ol>
<li>
<p>添加服务端文件：</p>
<ul>
<li><code>main.server.ts</code> - 服务端主程序文件</li>
<li><code>app/app.server.module.ts</code> - 服务端应用程序主模块</li>
<li><code>tsconfig.server.json</code> - TypeScript 服务端配置文件</li>
<li><code>server.ts</code> - Express web server 的运行文件</li>
</ul>
</li>
<li>
<p>修改的文件：</p>
<ul>
<li><code>package.json</code> - 添加 SSR 所需要的依赖和运行脚本</li>
<li><code>angular.json</code> - 添加开发、构建 SSR 应用所需要的配置</li>
</ul>
</li>
</ol>
<p>在 <code>package.json</code> 中，会自动添加一些 npm 脚本：<code>dev:ssr</code> 用于在开发环境运行 SSR 版本；<code>serve:ssr</code> 用于直接运行 build 或 prerender 后的网页；<code>build:ssr</code> 构建 SSR 版本的网页；<code>prerender</code> 构建预渲染后的网页，与 <code>build</code> 不同，这里会根据提供的 <code>routes</code> 生成这些页面的 HTML 文件。</p>
<h2 id="替换浏览器-api">替换浏览器 API</h2>
<p>由于 Universal 应用不是在浏览器中执行，因此一些浏览器的 API 或功能将不可用。例如，服务端应用是无法使用浏览器中的全局对象 <code>window</code>、<code>document</code>，<code>navigator</code>，<code>location</code>。</p>
<p>Angular 提供了两个可注入对象，用于在服务端替换对等的对象：<code>Location</code> 和 <code>DOCUMENT</code>。</p>
<p>例如，在浏览器中，我们通过 <code>window.location.href</code> 获取当前浏览器的地址，而改成 SSR 之后，代码如下：</p>
<pre><code class="language-ts">import { Location } from '@angular/common';
export class AbmNavbarComponent implements OnInit{
// ctor 中注入 Location
constructor(private _location:Location){
//...
}
ngOnInit() {
// 打印当前地址
console.log(this._location.path(true));
}
}
</code></pre>
<p>同样，对于在浏览器使用 <code>document.getElementById()</code> 获取 DOM 元素，在改成 SSR 之后，代码如下：</p>
<pre><code class="language-ts">import { DOCUMENT } from '@angular/common';
export class AbmFoxComponent implements OnInit{
// ctor 中注入 DOCUMENT
constructor(@Inject(DOCUMENT) private _document: Document) { }
ngOnInit() {
// 获取 id 为 fox-container 的 DOM
const container = this._document.getElementById('fox-container');
}
}
</code></pre>
<h2 id="使用-url-绝对地址">使用 URL 绝对地址</h2>
<p>在 Angular SSR 应用中，HTTP 请求的 URL 地址必须为 <em>绝对地址</em>（即，以 <code>http/https</code> 开头的地址，不能是相对地址，如 <code>/api/heros</code>）。Angular 官方推荐将请求的 URL 全路径设置到 <code>renderModule()</code> 或 <code>renderModuleFactory()</code> 的 <code>options</code> 参数中。但是在 v14 自动生成的代码中，并没有显式调用这两个方法的代码。而通过读 Http 请求的拦截，也可以达到同样的效果。</p>
<p>下面我们先准备一个拦截器，假设文件位于项目的 <code>shared/universal-relative.interceptor.ts</code> 路径：</p>
<pre><code class="language-ts">import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Inject, Injectable, Optional } from '@angular/core';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { Request } from 'express';
// 忽略大小写检查
const startsWithAny = (arr: string[] = []) => (value = '') => {
return arr.some(test => value.toLowerCase().startsWith(test.toLowerCase()));
};
// http, https, 相对协议地址
const isAbsoluteURL = startsWithAny(['http', '//']);
@Injectable()
export class UniversalRelativeInterceptor implements HttpInterceptor {
constructor(@Optional() @Inject(REQUEST) protected request: Request) { }
intercept(req: HttpRequest<any>, next: HttpHandler) {
// 不是绝对地址的 URL
if (!isAbsoluteURL(req.url)) {
let protocolHost: string;
if (this.request) {
// 如果注入的 REQUEST 不为空，则从注入的 SSR REQUEST 中获取协议和地址
protocolHost = `${this.request.protocol}://${this.request.get(
'host'
)}`;
} else {
// 如果注入的 REQUEST 为空，比如在进行 prerender build：
// 这里需要添加自定义的地址前缀，比如我们的请求都是从 abmcode.com 来。
protocolHost = 'https://www.abmcode.com';
}
const pathSeparator = !req.url.startsWith('/') ? '/' : '';
const url = protocolHost + pathSeparator + req.url;
const serverRequest = req.clone({ url });
return next.handle(serverRequest);
} else {
return next.handle(req);
}
}
}
</code></pre>
<p>然后在 <code>app.server.module.ts</code> 文件中 provide 出来：</p>
<pre><code class="language-ts">import { UniversalRelativeInterceptor } from './shared/universal-relative.interceptor';
// ... 其他 imports
@NgModule({
imports: [
AppModule,
ServerModule,
// 如果你用了 @angular/flext-layout，这里也需要引入服务端模块
FlexLayoutServerModule,
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: UniversalRelativeInterceptor,
multi: true
}
],
bootstrap: ,
})
export class AppServerModule { }
</code></pre>
<p>这样任何对于相对地址的请求都会自动转换为绝对地址请求，在 SSR 的场景下不会再出问题。</p>
<h2 id="prerender-预渲染静态-html">Prerender 预渲染静态 HTML</h2>
<p>经过上面的步骤后，如果我们通过 <code>npm run build:ssr</code> 构建项目，你会发现在 <code>dist/<your project>/browser</code> 下面只有 <code>index.html</code> 文件，打开文件查看，发现其中还有 <code><app-root></app-root></code> 这样的元素，也就是说你的网页内容并没有在 html 中生成。这是因为 Angular 使用了动态路由，比如 <code>/product/:id</code> 这种路由，而页面的渲染结果要经过 JS 的执行才能知道，因此，Angular 使用了 Express 作为 Web 服务器，能在服务端运行时根据用户请求（爬虫请求）使用模板引擎生成静态 HTML 界面。</p>
<p>而 <code>prerender</code>（<code>npm run prerender</code>）会在构建时生成静态 HTML 文件。比如我们做企业官网，只有几个页面，那么我们可以使用预渲染技术生成这几个页面的静态 HTML 文件，避免在运行时动态生成，从而进一步提升网页的访问速度和用户体验。</p>
<h3 id="预渲染路径配置">预渲染路径配置</h3>
<p>需要进行预渲染（预编译 HTML）的网页路径，可以有几种方式进行提供：</p>
<ol>
<li>
<p>通过命令行的附加参数:</p>
<pre><code class="language-sh">ng run <app-name>:prerender --routes /product/1 /product/2
</code></pre>
</li>
<li>
<p>如果路径比较多，比如针对 <code>product/:id</code> 这种动态路径，则可以使用一个路径文件：</p>
<blockquote>
<p>routes.txt</p>
</blockquote>
<pre><code>/products/1
/products/23
/products/145
/products/555
</code></pre>
<p>然后在命令行参数指定该文件：</p>
<pre><code class="language-sh">ng run <app-name>:prerender --routes-file routes.txt
</code></pre>
</li>
<li>
<p>在项目的 <code>angular.json</code> 文件配置需要的路径：</p>
<pre><code class="language-json"> "prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"routes": [ // 这里配置
"/",
"/main/home",
"/main/service",
"/main/team",
"/main/contact"
]
},
</code></pre>
</li>
</ol>
<p>配置完成后，重新执行预渲染命令（<code>npm run prerender</code> 或者使用命令行参数则按照上面<1><2>中的命令执行），编译完成后，再打开 <code>dist/<your project>/browser</code> 下的 <code>index.html</code> 会发现里面没有 <code><app-root></app-root></code> 了，取而代之的是主页的实际内容。同时也生成了相应的路径目录以及各个目录下的 <code>index.html</code> 子页面文件。</p>
<h2 id="seo-优化">SEO 优化</h2>
<p>SEO 的关键在于对网页 <code>title</code>，<code>keywords</code> 和 <code>description</code> 的收录，因此对于我们想要让搜索引擎收录的网页，可以修改代码提供这些内容。</p>
<p>在 Angular 14 中，如果路由界面通过 <code>Routes</code> 配置，可以将网页的静态 <code>title</code> 直接写在路由的配置中：</p>
<pre><code class="language-ts">{ path: 'home', component: AbmHomeComponent, title: '<你想显示在浏览器 tab 上的标题>' },
</code></pre>
<p>另外，Angular 也提供了可注入的 <code>Title</code> 和 <code>Meta</code> 用于修改网页的标题和 meta 信息：</p>
<pre><code class="language-ts">import { Meta, Title } from '@angular/platform-browser';
export class AbmHomeComponent implements OnInit {
constructor(
private _title: Title,
private _meta: Meta,
) { }
ngOnInit() {
this._title.setTitle('<此页的标题>');
this._meta.addTags([
{ name: 'keywords', content: '<此页的 keywords，以英文逗号隔开>' },
{ name: 'description', content: '<此页的描述>' }
]);
}
}
</code></pre>
<h2 id="总结">总结</h2>
<p>Angular 作为 SPA 企业级开发框架，在模块化、团队合作开发方面有自己独到的优势。在进化到 v14 这个版本中提供了不依赖 <code>NgModule</code> 的独立 <code>Component</code> 功能，进一步简化了模块化的架构。</p>
<p>Angular Universal 主要关注将 Angular App 如何进行服务端渲染和生成静态 HTML，对于用户交互复杂的 SPA 并不推荐使用 SSR。针对页面数量较少、又有 SEO 需求的网站或系统，则可以考虑使用 Universal 和 SSR 技术。</p><br><br>
来源：https://www.cnblogs.com/jmix/p/angular_ssr_seo.html
頁:
[1]