Angular의 서버 측 렌더링(SSR)을 탐색하는 기사-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Angular의 서버 측 렌더링(SSR)을 탐색하는 기사

青灯夜游

Dec 27, 2022 pm 07:24 PM

angularssr

Angular의 서버 측 렌더링(SSR)을 탐색하는 기사

일반적으로 일반 Angular 애플리케이션은 browser에서 실행되고 DOM에서 페이지를 렌더링하며 사용자와 상호 작용합니다. Angular Universal은 서버 측(서버 측 렌더링, SSR)에서 렌더링하고, 정적 애플리케이션 웹 페이지를 생성한 다음 이를 클라이언트에 표시합니다. 장점은 완전한 상호 작용을 제공하기 전에 더 빠르게 렌더링할 수 있다는 것입니다. 사용자를 위해. [관련 튜토리얼 추천: "angular Tutorial"]

이 글은 Angular 14 환경에서 작성되었습니다. 일부 내용은 새로운 Angular 버전에 적용되지 않을 수 있습니다.

SSR 사용의 이점

SEO에 더 친숙해짐

Google을 포함한 일부 검색 엔진과 소셜 미디어에서는 이미 JavaScript(JS) 애플리케이션으로 구동되는 SPA(단일 페이지)를 크롤링할 수 있다고 주장하지만 , 그러나 결과는 만족스럽지 못한 것 같습니다. 정적 HTML 웹사이트의 SEO 성능은 여전히 동적 웹사이트보다 우수합니다. 이는 Angular의 공식 웹사이트에서도 볼 수 있는 견해입니다(Angular는 Google 소유입니다!).

Universal은 검색, 외부 링크 및 탐색에 대한 더 나은 지원을 통해 JS 없이 애플리케이션의 정적 버전을 생성할 수 있습니다.

모바일 성능 향상

일부 모바일 장치는 JS를 지원하지 않거나 JS에 대한 지원이 매우 제한되어 웹 사이트 액세스 환경이 매우 열악할 수 있습니다. 이 경우 사용자에게 더 나은 경험을 제공하기 위해 JS 프리 버전의 앱을 제공해야 합니다.

홈페이지 표시 속도 향상

사용자 경험을 위해서는 홈페이지 표시 속도가 중요합니다. eBay 에 따르면 100밀리초 더 빠른 검색 결과가 표시될 때마다 "장바구니에 추가" 사용량이 0.5% 증가합니다.

Universal을 사용하면 애플리케이션 홈페이지가 완전한 형태로 사용자에게 표시됩니다. 이는 JS가 지원되지 않는 경우에도 표시할 수 있는 순수 HTML 웹페이지입니다. 현재 웹페이지는 브라우저 이벤트를 처리할 수 없지만 routerLink를 통한 점프를 지원합니다. routerLink 进行跳转。

这么做的好处是，我们可以先用静态网页抓住用户的注意力，在用户浏览网页的时候，同时加载整个 Angular 应用。这给了用户一个非常好的极速加载的体验。

为项目增加 SSR

Angular CLI 可以帮助我们非常便捷的将一个普通的 Angular 项目转变为一个带有 SSR 的项目。创建服务端应用只需要一个命令：

ng add @nguniversal/express-engine

建议在运行该命令之前先提交所有的改动。

这个命令会对项目做如下修改：

添加服务端文件：
- main.server.ts - 服务端主程序文件
- app/app.server.module.ts - 服务端应用程序主模块
- tsconfig.server.json - TypeScript 服务端配置文件
- server.ts - Express web server 的运行文件
修改的文件：
- package.json - 添加 SSR 所需要的依赖和运行脚本
- angular.json - 添加开发、构建 SSR 应用所需要的配置

在 package.json 中，会自动添加一些 npm 脚本：dev:ssr 用于在开发环境运行 SSR 版本；serve:ssr 用于直接运行 build 或 prerender 后的网页；build:ssr 构建 SSR 版本的网页；prerender 构建预渲染后的网页，与 build 不同，这里会根据提供的 routes 生成这些页面的 HTML 文件。

替换浏览器 API

由于 Universal 应用不是在浏览器中执行，因此一些浏览器的 API 或功能将不可用。例如，服务端应用是无法使用浏览器中的全局对象 window、document，navigator，location。

Angular 提供了两个可注入对象，用于在服务端替换对等的对象：Location 和 DOCUMENT。

例如，在浏览器中，我们通过 window.location.href 获取当前浏览器的地址，而改成 SSR 之后，代码如下：

import { Location } from &#39;@angular/common&#39;;
 
export class AbmNavbarComponent implements OnInit{
  // ctor 中注入 Location
  constructor(private _location:Location){
    //...
  }
 
  ngOnInit() {
    // 打印当前地址
    console.log(this._location.path(true));
  }
}

同样，对于在浏览器使用 document.getElementById()

이것의 장점은 정적 웹 페이지를 사용하여 사용자의 관심을 먼저 끌 수 있고, 사용자가 웹 페이지를 탐색할 때 동시에 전체 Angular 애플리케이션을 로드할 수 있다는 것입니다. 이는 사용자에게 매우 훌륭하고 매우 빠른 로딩 경험을 제공합니다. 🎜

🎜프로젝트에 SSR 추가🎜🎜🎜Angular CLI를 사용하면 일반 Angular 프로젝트를 SSR이 있는 프로젝트로 쉽게 변환할 수 있습니다. 서버 측 애플리케이션을 생성하려면 🎜

import { DOCUMENT } from &#39;@angular/common&#39;;
 
export class AbmFoxComponent implements OnInit{
  // ctor 中注入 DOCUMENT
  constructor(@Inject(DOCUMENT) private _document: Document) { }
 
  ngOnInit() {
    // 获取 id 为 fox-container 的 DOM
    const container = this._document.getElementById(&#39;fox-container&#39;);
  }
}

🎜🎜 명령 하나만 필요합니다. 이 명령을 실행하기 전에 모든 변경 사항을 커밋하는 것이 좋습니다. 🎜🎜🎜이 명령은 프로젝트를 다음과 같이 수정합니다: 🎜

🎜서버 파일 추가: 🎜
- main .server .ts - 서버 기본 프로그램 파일
- app/app.server.module.ts - 서버 애플리케이션 기본 모듈
- tsconfig.server.json - TypeScript 서버 구성 파일
- server.ts - Express🎜 웹 서버 실행 파일
🎜수정된 파일:🎜
- 패키지. json - SSR에 필요한 종속성 추가 및 스크립트 실행
- angular.json - SSR 애플리케이션 개발 및 구축에 필요한 구성 추가

🎜 package.json에는 일부 npm 스크립트가 자동으로 추가됩니다: 개발 환경 SSR 버전에서 실행하기 위한 dev:ssr; Serve:ssr는 빌드 또는 사전 렌더링된 웹페이지를 직접 실행하는 데 사용됩니다. build:ssr는 웹페이지의 SSR 버전을 빌드합니다. 렌더링된 웹페이지는 빌드와 다릅니다. 이러한 페이지의 HTML 파일은 제공된 경로를 기반으로 생성됩니다. 🎜

🎜브라우저 API 교체🎜🎜🎜브라우저에서는 범용 애플리케이션이 실행되지 않기 때문에 일부 브라우저 API나 기능을 사용할 수 없습니다. 예를 들어, 서버 측 애플리케이션은 브라우저. 🎜🎜Angular는 서버측에서 동등한 개체를 대체하기 위한 두 가지 주입 가능한 개체인 Location 및 DOCUMENT를 제공합니다. 🎜🎜예를 들어 브라우저에서는 window.location.href를 통해 현재 브라우저의 주소를 얻어오고 이를 SSR로 변경한 후 코드는 다음과 같습니다. 🎜

import { HttpHandler, HttpInterceptor, HttpRequest } from &#39;@angular/common/http&#39;;
import { Inject, Injectable, Optional } from &#39;@angular/core&#39;;
import { REQUEST } from &#39;@nguniversal/express-engine/tokens&#39;;
import { Request } from &#39;express&#39;;
 
// 忽略大小写检查
const startsWithAny = (arr: string[] = []) => (value = &#39;&#39;) => {
    return arr.some(test => value.toLowerCase().startsWith(test.toLowerCase()));
};
 
// http, https, 相对协议地址
const isAbsoluteURL = startsWithAny([&#39;http&#39;, &#39;//&#39;]);
 
@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(
                    &#39;host&#39;
                )}`;
            } else {
                // 如果注入的 REQUEST 为空，比如在进行 prerender build：
                // 这里需要添加自定义的地址前缀，比如我们的请求都是从 abmcode.com 来。
                protocolHost = &#39;https://www.abmcode.com&#39;;
            }
            const pathSeparator = !req.url.startsWith(&#39;/&#39;) ? &#39;/&#39; : &#39;&#39;;
            const url = protocolHost + pathSeparator + req.url;
            const serverRequest = req.clone({ url });
            return next.handle(serverRequest);
 
        } else {
            return next.handle(req);
        }
    }
}

🎜마찬가지로 for 브라우저 코드>document.getElementById()에서

를 사용하여 DOM 요소를 SSR로 변경한 후 코드는 다음과 같습니다. 🎜<pre class='brush:php;toolbar:false;'>import { DOCUMENT } from &amp;#39;@angular/common&amp;#39;;
 
export class AbmFoxComponent implements OnInit{
  // ctor 中注入 DOCUMENT
  constructor(@Inject(DOCUMENT) private _document: Document) { }
 
  ngOnInit() {
    // 获取 id 为 fox-container 的 DOM
    const container = this._document.getElementById(&amp;#39;fox-container&amp;#39;);
  }
}</pre><h2 id="使用-URL-绝对地址">使用 URL 绝对地址</h2>
<p>在 Angular SSR 应用中，HTTP 请求的 URL 地址必须为 <em>绝对地址</em>（即，以 <code>http/https

开头的地址，不能是相对地址，如 /api/heros）。Angular 官方推荐将请求的 URL 全路径设置到 renderModule() 或 renderModuleFactory() 的 options 参数中。但是在 v14 自动生成的代码中，并没有显式调用这两个方法的代码。而通过读 Http 请求的拦截，也可以达到同样的效果。

下面我们先准备一个拦截器，假设文件位于项目的 shared/universal-relative.interceptor.ts 路径：

import { HttpHandler, HttpInterceptor, HttpRequest } from &#39;@angular/common/http&#39;;
import { Inject, Injectable, Optional } from &#39;@angular/core&#39;;
import { REQUEST } from &#39;@nguniversal/express-engine/tokens&#39;;
import { Request } from &#39;express&#39;;
 
// 忽略大小写检查
const startsWithAny = (arr: string[] = []) => (value = &#39;&#39;) => {
    return arr.some(test => value.toLowerCase().startsWith(test.toLowerCase()));
};
 
// http, https, 相对协议地址
const isAbsoluteURL = startsWithAny([&#39;http&#39;, &#39;//&#39;]);
 
@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(
                    &#39;host&#39;
                )}`;
            } else {
                // 如果注入的 REQUEST 为空，比如在进行 prerender build：
                // 这里需要添加自定义的地址前缀，比如我们的请求都是从 abmcode.com 来。
                protocolHost = &#39;https://www.abmcode.com&#39;;
            }
            const pathSeparator = !req.url.startsWith(&#39;/&#39;) ? &#39;/&#39; : &#39;&#39;;
            const url = protocolHost + pathSeparator + req.url;
            const serverRequest = req.clone({ url });
            return next.handle(serverRequest);
 
        } else {
            return next.handle(req);
        }
    }
}

然后在 app.server.module.ts 文件中 provide 出来：

import { UniversalRelativeInterceptor } from &#39;./shared/universal-relative.interceptor&#39;;
// ... 其他 imports

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    // 如果你用了 @angular/flext-layout，这里也需要引入服务端模块
    FlexLayoutServerModule, 
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UniversalRelativeInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule { }

这样任何对于相对地址的请求都会自动转换为绝对地址请求，在 SSR 的场景下不会再出问题。

Prerender 预渲染静态 HTML

经过上面的步骤后，如果我们通过 npm run build:ssr 构建项目，你会发现在 dist/<your project>/browser</your> 下面只有 index.html 文件，打开文件查看，发现其中还有 <app-root></app-root> 这样的元素，也就是说你的网页内容并没有在 html 中生成。这是因为 Angular 使用了动态路由，比如 /product/:id 这种路由，而页面的渲染结果要经过 JS 的执行才能知道，因此，Angular 使用了 Express 作为 Web 服务器，能在服务端运行时根据用户请求（爬虫请求）使用模板引擎生成静态 HTML 界面。

而 prerender（npm run prerender）会在构建时生成静态 HTML 文件。比如我们做企业官网，只有几个页面，那么我们可以使用预渲染技术生成这几个页面的静态 HTML 文件，避免在运行时动态生成，从而进一步提升网页的访问速度和用户体验。

预渲染路径配置

需要进行预渲染（预编译 HTML）的网页路径，可以有几种方式进行提供：

通过命令行的附加参数:

ng run <app-name>:prerender --routes /product/1 /product/2

如果路径比较多，比如针对 product/:id 这种动态路径，则可以使用一个路径文件：

routes.txt
```
/products/1
/products/23
/products/145
/products/555
```
然后在命令行参数指定该文件：
```
ng run <app-name>:prerender --routes-file routes.txt
```

在项目的 angular.json 文件配置需要的路径：

 "prerender": {
   "builder": "@nguniversal/builders:prerender",
   "options": {
     "routes": [ // 这里配置
       "/",
       "/main/home",
       "/main/service",
       "/main/team",
       "/main/contact"
     ]
   },

配置完成后，重新执行预渲染命令（npm run prerender 或者使用命令行参数则按照上面中的命令执行），编译完成后，再打开 dist/<your project>/browser</your> 下的 index.html 会发现里面没有 <app-root></app-root> 了，取而代之的是主页的实际内容。同时也生成了相应的路径目录以及各个目录下的 index.html 子页面文件。

SEO 优化

SEO 的关键在于对网页 title，keywords 和 description 的收录，因此对于我们想要让搜索引擎收录的网页，可以修改代码提供这些内容。

在 Angular 14 中，如果路由界面通过 Routes 配置，可以将网页的静态 title 直接写在路由的配置中：

{ path: &#39;home&#39;, component: AbmHomeComponent, title: &#39;<你想显示在浏览器 tab 上的标题>&#39; },

另外，Angular 也提供了可注入的 Title 和 Meta 用于修改网页的标题和 meta 信息：

import { Meta, Title } from &#39;@angular/platform-browser&#39;;
 
export class AbmHomeComponent implements OnInit {
 
  constructor(
    private _title: Title,
    private _meta: Meta,
  ) { }
 
  ngOnInit() {
    this._title.setTitle(&#39;<此页的标题>&#39;);
    this._meta.addTags([
      { name: &#39;keywords&#39;, content: &#39;<此页的 keywords，以英文逗号隔开>&#39; },
      { name: &#39;description&#39;, content: &#39;<此页的描述>&#39; }
    ]);
  }
}