Angular Universal 服务端渲染

使用angular创建的项目都是单页应用，即SPA应用。所以一般用来开发大数据量、大交互的后台系统。但是有时候需要考虑到seo的问题，就不得不用到服务端渲染技术。三大框架（react、angular、vue）都具有服务端渲染的功能。

官方文档（https://angular.cn/guide/universal）

创建项目

和正常的创建angular项目一致，使用ng new projectName 即可

创建服务端应用模块 app.server.module.ts

ng add @nguniversal/express-engine --clientProject ProjectName

本地打包和运行

npm run build:ssr
npm run serve:ssr

访问

http://localhost:4000/

客户端渲染和服务端渲染对比

客户端渲染：在浏览器渲染dom

服务端渲染：提前渲染好html静态页面，有利于seo,提高加载速度

部署

打包之后dist目录如下

在放到服务器中，首先得更改路径


不更改路径会报如下错误

需要node来启动

访问

http://192.168.1.112:4000/