详解Angular5 服务端渲染实战

为了详细讲解“详解Angular5 服务端渲染实战”的完整攻略，我们需要分为以下几个部分：

1. 什么是服务端渲染（SSR）？
2. Angular 在 SSR 中的应用原理
3. 如何使用 Angular Universal 进行 SSR ？
4. 两条示例说明

1. 什么是服务端渲染（SSR）？

服务端渲染 (SSR) 是指将服务器端的数据和业务逻辑结合生成 HTML 页面返回给浏览器进行渲染的过程。常听到的 SSR 框架有 Next.js、Nuxt.js 等。

相对于客户端渲染（CSR），SSR 的优点在于：

• 提高页面的可读性和 SEO 性能
• 加快页面的首次渲染时间，提升用户体验

2. Angular 在 SSR 中的应用原理

Angular 的应用需要通过 Webpack 将 Typescript 编译成 JavaScript 并打包成一组文件，然后浏览器需要加载这些文件才能正常运行应用。

服务端渲染时，我们需要将 Angular 应用的代码在服务端直接生成一组 HTML 页面返回给浏览器，而不是等待浏览器加载完应用后再进行渲染。因此我们需要解决以下几个问题：

• 如何在服务端直接生成 Angular 应用的 HTML 页面？
• 如何将服务端生成的 HTML 页面与客户端的 Angular 应用进行同步，确保应用的正常运行？

3. 如何使用 Angular Universal 进行 SSR ？

答案是使用 Angular Universal。

Angular Universal 是 Angular 官方出品的服务端渲染解决方案。使用 Angular Universal 的步骤如下：

1. 安装 Angular Universal

ng add @nguniversal/express-engine

1. 生成 Universal 应用

ng generate universal {{your_project_name}}

此时会在应用根目录下生成 server 目录和 server.ts 文件。

1. 修改 server.ts 文件

在 server.ts 文件中，我们需要做以下几个操作：

• 导入 Angular Universal 相关的模块
• 使用 renderModuleFactory 生成 Angular 应用的 HTML 页面
• 将 HTML 页面返回给浏览器进行渲染

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
import { renderModuleFactory } from '@angular/platform-server';
import { AppServerModuleNgFactory } from './src/main-server';

// Enable production mode
enableProdMode();

// Create express server
const app = express();
const port = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const { AppServerModuleNgFactory } = require('./dist/server/main');

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };
  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

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

// Serve static files from /browser
app.use('/', express.static(join(DIST_FOLDER, 'browser'), { index: false }));

// Start express server
app.listen(port, () => {
  console.log(`Listening on http://localhost:${port}`);
});

1. 运行 Universal 应用

使用以下命令运行 Universal 应用：

npm run build:ssr && npm run serve:ssr

4. 两条示例说明

示例一：路由预渲染

对于一些不怎么会变化的页面，可以通过路由预渲染来优化性能。示例代码如下：

import { Route } from '@angular/router';
import { PreRenderedComponent } from './pre-rendered.component';

export const routes: Route[] = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'home'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'pre-rendered',
    component: PreRenderedComponent,
    data: {
      title: 'Pre-rendered Page'
    },
    // 使用路由预渲染
    // 会先生成 HTML 页面返回给浏览器进行渲染
    // 再使用客户端的 Angular 应用进行渲染
    // 避免用户看到白屏
    // 对于不经常变化的页面性能提升明显
    // 对于经常变化的页面反而会降低性能
    // 所以需要权衡
    // 如果不需要预渲染，可以移除此行
    runGuardsAndResolvers: 'always'
  },
  {
    path: '**',
    redirectTo: 'home'
  }
];

示例二：SEO

服务端渲染可以提高页面的 SEO 性能，以下是示例页面的完整代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Meta, Title } from '@angular/platform-browser';

@Component({
  selector: 'app-seo',
  template: `
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
    <p>{{ keywords }}</p>
  `
})
export class SeoComponent implements OnInit {

  title: string;
  description: string;
  keywords: string;

  constructor(
    private route: ActivatedRoute,
    private meta: Meta,
    private titleService: Title
  ) { }

  ngOnInit(): void {
    this.route.data.subscribe(data => {
      this.title = data.title;
      this.description = data.description;
      this.keywords = data.keywords;
      this.titleService.setTitle(data.title);
      this.meta.addTag({ name: 'description', content: data.description });
      this.meta.addTag({ name: 'keywords', content: data.keywords });
    });
  }

}

在添加路由时，需要设置 data 属性来指定页面的 title、description 和 keywords 等 SEO 相关属性：

import { Route } from '@angular/router';
import { SeoComponent } from './seo.component';

export const routes: Route[] = [
  {
    path: 'seo',
    component: SeoComponent,
    data: {
      title: 'SEO Page',
      description: 'This is an SEO page',
      keywords: 'SEO,Page,Keywords'
    }
  }
];

以上就是“详解Angular5 服务端渲染实战”的完整攻略，希望能对您有所帮助。