为了详细讲解“详解Angular5 服务端渲染实战”的完整攻略,我们需要分为以下几个部分:
- 什么是服务端渲染(SSR)?
- Angular 在 SSR 中的应用原理
- 如何使用 Angular Universal 进行 SSR ?
- 两条示例说明
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 的步骤如下:
- 安装 Angular Universal
ng add @nguniversal/express-engine
- 生成 Universal 应用
ng generate universal {{your_project_name}}
此时会在应用根目录下生成 server
目录和 server.ts
文件。
- 修改
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}`);
});
- 运行 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 服务端渲染实战”的完整攻略,希望能对您有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解Angular5 服务端渲染实战 - Python技术站