집 > 기사 > 웹 프론트엔드 > Angular의 서버 측 렌더링(SSR)을 탐색하는 기사

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

青灯夜游앞으로: 2022-12-27 19:24:072108검색

일반적으로 일반 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:js;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/9ad5cf4808085b3e6cc130d06d568f1c/browser 下面只有 index.html 文件，打开文件查看，发现其中还有 57b7f9effa9cadc72edb88082c9f873b33f1bb210aedf28e397b6902027fb58b 这样的元素，也就是说你的网页内容并没有在 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 或者使用命令行参数则按照上面f35d6e602fd7d0f0edfa6f7d103c1b572cc198a1d5eb0d3eb508d858c9f5cbdb中的命令执行），编译完成后，再打开 dist/9ad5cf4808085b3e6cc130d06d568f1c/browser 下的 index.html 会发现里面没有 57b7f9effa9cadc72edb88082c9f873b33f1bb210aedf28e397b6902027fb58b 了，取而代之的是主页的实际内容。同时也生成了相应的路径目录以及各个目录下的 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; }
    ]);
  }
}

总结

Angular 作为 SPA 企业级开发框架，在模块化、团队合作开发方面有自己独到的优势。在进化到 v14 这个版本中提供了不依赖 NgModule 的独立 Component 功能，进一步简化了模块化的架构。

Angular Universal 主要关注将 Angular App 如何进行服务端渲染和生成静态 HTML，对于用户交互复杂的 SPA 并不推荐使用 SSR。针对页面数量较少、又有 SEO 需求的网站或系统，则可以考虑使用 Universal 和 SSR 技术。

更多编程相关知识，请访问：编程教学！！

위 내용은 Angular의 서버 측 렌더링(SSR)을 탐색하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript typescript 架构 json html npm angular express 命令行参数 JS 对象事件 dom location href http https 搜索引擎 SEO

성명：

이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Node의 프로세스와 스레드에 대한 심층 분석다음 기사：Node의 프로세스와 스레드에 대한 심층 분석