Angular development practice server-side rendering

This article mainly introduces the server-side rendering of Angular development practice. Now I share it with you and give you a reference.

Angular Universal

Angular provides a set of front-end and back-end isomorphic solutions for server-side rendering. It is Angular Universal (unified platform), a server-side rendering solution. Technology for running Angular applications.

A standard Angular application will be executed in the browser, and it will render the page in the DOM in response to user operations.

Angular Universal generates static application pages on the server through a process called server-side rendering (SSR).

It can generate these pages and respond directly with them when the browser requests them. It can also pre-generate pages into HTML files and then serve them as static files for the server.

Working principle

To make a Universal application, you need to install the platform-server package. The platform-server package provides server-side DOM implementation, XMLHttpRequest and other low-level features, but no longer relies on the browser.

You need to use the platform-server module instead of the platform-browser module to compile the client application and run the Universal application on a web server.

The server (the Node Express server is used in the example below) will pass the client's request for the application page to the renderModuleFactory function.

The renderModuleFactory function accepts as input a template HTML page (usually index.html), an Angular module containing the components, and a route that determines which components should be displayed.

This route is passed to the server from the client's request. Each request will give an appropriate view of the requested route.

renderModuleFactory renders which view in the <app> tag in the template and creates a completed HTML page for the client.

Finally, the server will return the rendered page to the client.

Why server-side rendering

Three main reasons:

1. Help web crawlers (SEO)

2. Improve performance on mobile phones and low-power devices

3. Display the first page quickly

Help Web Crawler (SEO)

Google, Bing, Baidu, Facebook, Twitter and other search engines or social media sites rely on web crawlers to index your app content and make it Content can be searched via the Internet.

These web crawlers may not navigate to and index your highly interactive Angular app like a human would.

Angular Universal can generate a static version of your application that is searchable, linkable, and browseable without the need for JavaScript. It also allows the site to be previewed, since each URL returns a fully rendered page.

Enabling web crawlers is often referred to as search engine optimization (SEO).

Improve performance on mobile phones and low-power devices

Some devices do not support JavaScript or JavaScript is executed poorly, resulting in an unacceptable user experience. For these cases, you may want a server-rendered, JavaScript-free version of the app. Although there are some limitations, this version may be the only option for those who have no way to use the app at all.

Display the homepage quickly

Displaying the homepage quickly is crucial to attracting users.

53% of mobile websites are abandoned if a page takes more than three seconds to load. Your app needs to launch faster to grab the user's attention before they decide to do something else.

Using Angular Universal, you can generate "landing pages" for your application that look just like the full application. These landing pages are pure HTML and display even if JavaScript is disabled. These pages do not handle browser events, but they can be navigated within the site using routerLink.

In practice, you may want to use a static version of the landing page to keep the user's attention. At the same time, you will also be loading the complete Angular application behind the scenes. Users will expect the landing page to appear almost instantly, and once the full app has loaded, they will have a fully interactive experience.

Sample analysis

The following will be explained based on my sample project angular-universal-starter on GitHub.

This project, like the example project in the first article, is developed and built based on Angular CLI, so the only difference between them is the configuration required for server-side rendering.

Installation tools

Before starting, the following packages must be installed (the sample projects have been configured, just npm install ):

1. @angular/platform-server - Universal's server-side component.

2. @nguniversal/module-map-ngfactory-loader - Used to handle lazy loading in server-side rendering environment.

3. @nguniversal/express-engine - Universal 应用的 Express 引擎。

4. ts-loader - 用于对服务端应用进行转译。

5. express - Node Express 服务器

使用下列命令安装它们：

npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine express

项目配置

配置工作有：

1. 创建服务端应用模块：src/app/app.server.module.ts

2. 修改客户端应用模块：src/app/app.module.ts

3. 创建服务端应用的引导程序文件：src/main.server.ts

4. 修改客户端应用的引导程序文件：src/main.ts

5. 创建 TypeScript 的服务端配置：src/tsconfig.server.json

6. 修改 @angular/cli 的配置文件：.angular-cli.json

7. 创建 Node Express 的服务程序：server.ts

8. 创建服务端预渲染的程序：prerender.ts

9. 创建 Webpack 的服务端配置：webpack.server.config.js

1、创建服务端应用模块：src/app/app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

import { AppBrowserModule } from './app.module';
import { AppComponent } from './app.component';

// 可以注册那些在 Universal 环境下运行应用时特有的服务提供商
@NgModule({
  imports: [
    AppBrowserModule, // 客户端应用的 AppModule
    ServerModule, // 服务端的 Angular 模块
    ModuleMapLoaderModule, // 用于实现服务端的路由的惰性加载
    ServerTransferStateModule, // 在服务端导入，用于实现将状态从服务器传输到客户端
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {
}

服务端应用模块（习惯上叫作 AppServerModule）是一个 Angular 模块，它包装了应用的根模块 AppModule，以便 Universal 可以在你的应用和服务器之间进行协调。 AppServerModule 还会告诉 Angular 再把你的应用以 Universal 方式运行时，该如何引导它。

2、修改客户端应用模块：src/app/app.module.ts

@NgModule({
  imports: [
    AppRoutingModule,
    BrowserModule.withServerTransition({appId: 'my-app'}),
    TransferHttpCacheModule, // 用于实现服务器到客户端的请求传输缓存，防止客户端重复请求服务端已完成的请求
    BrowserTransferStateModule, // 在客户端导入，用于实现将状态从服务器传输到客户端
    HttpClientModule
  ],
  declarations: [
    AppComponent,
    HomeComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppBrowserModule {
  constructor(@Inject(PLATFORM_ID) private platformId: Object,
        @Inject(APP_ID) private appId: string) {
    
    // 判断运行环境为客户端还是服务端
    const platform = isPlatformBrowser(platformId) ? 'in the browser' : 'on the server';
    console.log(`Running ${platform} with appId=${appId}`);
  }
}

将 NgModule 的元数据中 BrowserModule 的导入改成 BrowserModule.withServerTransition({appId: 'my-app'})，Angular 会把 appId 值（它可以是任何字符串）添加到服务端渲染页面的样式名中，以便它们在客户端应用启动时可以被找到并移除。

此时，我们可以通过依赖注入（@Inject(PLATFORM_ID) 及 @Inject(APP_ID)）取得关于当前平台和 appId 的运行时信息：

constructor(@Inject(PLATFORM_ID) private platformId: Object,
      @Inject(APP_ID) private appId: string) {
  
  // 判断运行环境为客户端还是服务端
  const platform = isPlatformBrowser(platformId) ? 'in the browser' : 'on the server';
  console.log(`Running ${platform} with appId=${appId}`);
}

3、创建服务端应用的引导程序文件：src/main.server.ts

该文件导出服务端模块：

export { AppServerModule } from './app/app.server.module';

4、修改客户端应用的引导程序文件：src/main.ts

监听 DOMContentLoaded 事件，在发生 DOMContentLoaded 事件时运行我们的代码，以使 TransferState 正常工作

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppBrowserModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

// 在 DOMContentLoaded 时运行我们的代码，以使 TransferState 正常工作
document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppBrowserModule);
});

5、创建 TypeScript 的服务端配置：src/tsconfig.server.json

{
 "extends": "../tsconfig.json",
 "compilerOptions": {
  "outDir": "../out-tsc/app",
  "baseUrl": "./",
  "module": "commonjs",
  "types": [
   "node"
  ]
 },
 "exclude": [
  "test.ts",
  "**/*.spec.ts"
 ],
 "angularCompilerOptions": {
  "entryModule": "app/app.server.module#AppServerModule"
 }
}

与 tsconfig.app.json 的差异在于：

module 属性必须是 commonjs，这样它才能被 require() 方法导入你的服务端应用。

angularCompilerOptions 部分有一些面向 AOT 编译器的选项：

1. entryModule - 服务端应用的根模块，其格式为 path/to/file#ClassName。

6、修改 @angular/cli 的配置文件：.angular-cli.json

在 apps 下添加：

{
  "platform": "server",
  "root": "src",
  "outDir": "dist/server",
  "assets": [
   "assets",
   "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.server.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.server.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "",
  "styles": [
   "styles.scss"
  ],
  "scripts": [],
  "environmentSource": "environments/environment.ts",
  "environments": {
   "dev": "environments/environment.ts",
   "prod": "environments/environment.prod.ts"
  }
}

7、创建 Node Express 的服务程序：server.ts

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main.bundle');

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

/* - Example Express Rest API endpoints -
 app.get('/api/**', (req, res) => { });
*/

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
  maxAge: '1y'
}));

// ALl regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', {req});
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

8、创建服务端预渲染的程序：prerender.ts

// Load zone.js for the server.
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
import { join } from 'path';

import { enableProdMode } from '@angular/core';
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { renderModuleFactory } from '@angular/platform-server';
import { ROUTES } from './static.paths';

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main.bundle');

const BROWSER_FOLDER = join(process.cwd(), 'browser');

// Load the index.html file containing referances to your application bundle.
const index = readFileSync(join('browser', 'index.html'), 'utf8');

let previousRender = Promise.resolve();

// Iterate each route path
ROUTES.forEach(route => {
  const fullPath = join(BROWSER_FOLDER, route);

  // Make sure the directory structure is there
  if (!existsSync(fullPath)) {
    mkdirSync(fullPath);
  }

  // Writes rendered HTML to index.html, replacing the file if it already exists.
  previousRender = previousRender.then(_ => renderModuleFactory(AppServerModuleNgFactory, {
    document: index,
    url: route,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  })).then(html => writeFileSync(join(fullPath, 'index.html'), html));
});

9、创建 Webpack 的服务端配置：webpack.server.config.js

Universal 应用不需要任何额外的 Webpack 配置，Angular CLI 会帮我们处理它们。但是由于本例子的 Node Express 的服务程序是 TypeScript 应用（server.ts及prerender.ts），所以要使用 Webpack 来转译它。这里不讨论 Webpack 的配置，需要了解的移步 Webpack官网

// Work around for https://github.com/angular/angular-cli/issues/7200

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    server: './server.ts', // This is our Express server for Dynamic universal
    prerender: './prerender.ts' // This is an example of Static prerendering (generative)
  },
  target: 'node',
  resolve: {extensions: ['.ts', '.js']},
  externals: [/(node_modules|main\..*\.js)/,], // Make sure we include all node_modules etc
  output: {
    path: path.join(__dirname, 'dist'), // Puts the output at the root of the dist folder
    filename: '[name].js'
  },
  module: {
    rules: [
      {test: /\.ts$/, loader: 'ts-loader'}
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      /(.+)?angular(\\|\/)core(.+)?/, // fixes WARNING Critical dependency: the request of a dependency is an expression
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      /(.+)?express(\\|\/)(.+)?/, // fixes WARNING Critical dependency: the request of a dependency is an expression
      path.join(__dirname, 'src'),
      {}
    )
  ]
};

测试配置

通过上面的配置，我们就制作完成一个可在服务端渲染的 Angular Universal 应用。

在 package.json 的 scripts 区配置 build 和 serve 有关的命令：

{
  "scripts": {
    "ng": "ng",
    "start": "ng serve -o",
    "ssr": "npm run build:ssr && npm run serve:ssr",
    "prerender": "npm run build:prerender && npm run serve:prerender",
    "build": "ng build",
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
    "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "generate:prerender": "cd dist && node prerender",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:prerender": "cd dist/browser && http-server",
    "serve:ssr": "node dist/server"
  }
}

开发只需运行 npm run start执行 npm run ssr 编译应用程序，并启动一个Node Express来为应用程序提供服务 http://localhost:4000

dist目录：

执行npm run prerender - 编译应用程序并预渲染应用程序文件，启动一个演示http服务器，以便您可以查看它 http://localhost:8080

注意： 要将静态网站部署到静态托管平台，您必须部署dist/browser文件夹, 而不是dist文件夹

dist目录：

根据项目实际的路由信息并在根目录的 static.paths.ts 中配置，提供给 prerender.ts 解析使用。

export const ROUTES = [
  '/',
  '/lazy'
];

因此，从dist目录可以看到，服务端预渲染会根据配置好的路由在 browser 生成对应的静态index.html。如 / 对应 /index.html，/lazy 对应 /lazy/index.html。

服务器到客户端的状态传输

在前面的介绍中，我们在 app.server.module.ts 中导入了 ServerTransferStateModule，在 app.module.ts 中导入了 BrowserTransferStateModule 和 TransferHttpCacheModule。

这三个模块都与服务器到客户端的状态传输有关：

1. ServerTransferStateModule：在服务端导入，用于实现将状态从服务器传输到客户端

2. BrowserTransferStateModule：在客户端导入，用于实现将状态从服务器传输到客户端

3. TransferHttpCacheModule：用于实现服务器到客户端的请求传输缓存，防止客户端重复请求服务端已完成的请求

使用这几个模块，可以解决 http请求在服务端和客户端分别请求一次 的问题。

比如在 home.component.ts 中有如下代码：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit, OnDestroy {
  constructor(public http: HttpClient) {
  }
  
  ngOnInit() {
    this.poiSearch(this.keyword, '北京市').subscribe((data: any) => {
      console.log(data);
    });
  }
  
  ngOnDestroy() {
  }
  
  poiSearch(text: string, city?: string): Observable<any> {
    return this.http.get(encodeURI(`http://restapi.amap.com/v3/place/text?keywords=${text}&city=${city}&offset=20&key=55f909211b9950837fba2c71d0488db9&extensions=all`));
  }
}

代码运行之后，

服务端请求并打印：

客户端再一次请求并打印：

方法1：使用 TransferHttpCacheModule

使用 TransferHttpCacheModule 很简单，代码不需要改动。在 app.module.ts 中导入之后，Angular自动会将服务端请求缓存到客户端，换句话说就是服务端请求到数据会自动传输到客户端，客户端接收到数据之后就不会再发送请求了。

方法2：使用 BrowserTransferStateModule

该方法稍微复杂一些，需要改动一些代码。

调整 home.component.ts 代码如下：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { makeStateKey, TransferState } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

const KFCLIST_KEY = makeStateKey('kfcList');

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit, OnDestroy {
  constructor(public http: HttpClient,
        private state: TransferState) {
  }
  
  ngOnInit() {
  
    // 采用一个标记来区分服务端是否已经拿到了数据，如果没拿到数据就在客户端请求，如果已经拿到数据就不发请求
    const kfcList：any[] = this.state.get(KFCLIST_KEY, null as any);

    if (!this.kfcList) {
      this.poiSearch(this.keyword, '北京市').subscribe((data: any) => {
        console.log(data);
        this.state.set(KFCLIST_KEY, data as any); // 存储数据
      });
    }
  }
  
  ngOnDestroy() {
    if (typeof window === 'object') {
      this.state.set(KFCLIST_KEY, null as any); // 删除数据
    }
  }
  
  poiSearch(text: string, city?: string): Observable<any> {
    return this.http.get(encodeURI(`http://restapi.amap.com/v3/place/text?keywords=${text}&city=${city}&offset=20&key=55f909211b9950837fba2c71d0488db9&extensions=all`));
  }
}

1. 使用 const KFCLIST_KEY = makeStateKey('kfcList') 创建储存传输数据的 StateKey

2. 在 HomeComponent 的构造函数中注入 TransferState

3. 在 ngOnInit 中根据 this.state.get(KFCLIST_KEY, null as any) 判断数据是否存在（不管是服务端还是客户端），存在就不再请求，不存在则请求数据并通过 this.state.set(KFCLIST_KEY, data as any) 存储传输数据

4. 在 ngOnDestroy 中根据当前是否客户端来决定是否将存储的数据进行删除

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Js面试算法详解

JS简单获取并修改input文本框内容的方法示例

详解vue表单

The above is the detailed content of Angular development practice server-side rendering. For more information, please follow other related articles on the PHP Chinese website!