一、服务端渲染SSR
1.什么是客户端渲染和服务端渲染？
客户端渲染：客户端向服务端请求HTML页面，后端不返回完整的 HTML页面，浏览器解析HTML页面过程中如果遇到ajax数据请求，会向服务端请求数据，拿到数据后进行HTML的拼接，然后在浏览器上完整的展示出来；这样前端可以专注于UI开发，后端专注于逻辑实现，实现了前后端的分离。
服务端渲染：与客户端渲染不同，服务端把HTML页面拼接好后，直接给客户端返回一个完整的HTML文件，服务端只需要负责解析然后展示出来。
2.服务端渲染的利弊
优点：
首屏渲染快，服务器只负责解析HTML，不需要多次请求数据；
有利于SEO，因为在后端有完整的html页面，所以爬虫更容易爬取信息。
缺点：
不利于前后端分离，对于复杂的项目开发效率低。
如果请求较多，会对服务器造成一定的访问压力。
二、ejs介绍
1.什么是ejs？
“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。
EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。
2.ejs有什么特点？
快速编译与绘制输出
简洁的模板标签：<% %>
自定义分割符（例如：用 <? ?> 替换 <% %>）
引入模板片段
同时支持服务器端和浏览器 JS 环境
JavaScript 中间结果静态缓存
模板静态缓存
兼容 Express 视图系统
3.标签含义
<%'脚本' 标签，用于流程控制，无输出。<%_删除其前面的空格符<%=输出数据到模板（输出是转义 HTML 标签）<%-输出非转义的数据到模板<%#注释标签，不执行、不输出内容<%%输出字符串 '<%'%>一般结束标签-%>删除紧随其后的换行符_%>将结束标签后面的空格符删除
4.用法
let template = ejs.compile(str, options);
template(data);
// => 输出渲染后的 HTML 字符串
ejs.render(str, data, options);
// => 输出渲染后的 HTML 字符串
ejs.renderFile(filename, data, options, function(err, str){
// str => 输出渲染后的 HTML 字符串
});
三、node+ejs实现服务端渲染
1.利用npm安装ejs
npm install ejs
2.新建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
header {
width: 400px;
text-align: center;
padding: 10px 0;
background: #f0f0f0;
}
main {
margin-left: 20px;
color: red;
}
</style>
<title>
ejs实现服务端渲染
</title>
</head>
<body>
<div>
<header>
<%= index %>
</header>
<main>
<%= content %>
</main>
</div>
</body>
</html>
文件目录
3.新建ejs_renderFile.js文件
const http = require("http");
// 引入ejs模块
const ejs = require("ejs");
http.createServer((request, response) => {
// 设置响应类型为html文件
response.writeHead(200, { 'Content-Type': 'text/html' });
// 需要读取的文件
var filename = './index.html'
// 设置html文件中ejs变量的数据，data的属性分别对应ejs中的index和content
var data = { index: '首页', content: '使用ejs.renderFile读取文件' };
// renderFile方法直接渲染文件
ejs.renderFile(filename, data, (err, data) => {
if (err) {
console.log(err);
} else {
// 返回渲染结果
response.end(data);
}
})
}).listen(3000);
// 可在本地的3000端口访问页面
console.log('Server running at http://127.0.0.1:3000/');
4.用node命令运行ejs_renderFile.js
5.访问http://127.0.0.1:3000/可以在Network中看到文件被服务端渲染
6.另外，我们还可以使用ejs.render语法实现
ejs_render.js
const http = require("http");
const fs = require("fs");
// 引入ejs
const ejs = require("ejs");
http.createServer(function (request, response) {
// 设置响应类型为html文件
response.writeHead(200, { 'Content-Type': 'text/html' });
// 读取index.html页面的数据
fs.readFile('./index.html', function (err, data) {
// 把html文件内容转化成字符串,供ejs渲染
var str = data.toString();
// 设置html文件中ejs变量的数据，data的属性分别对应ejs中的index和content
var data = { index: '首页', content: '使用ejs.render读取字符串' };
// render渲染
var result = ejs.render(str, data);
// 返回结果
response.end(result);
})
}).listen(3001);
// 可在本地的3001端口访问页面
console.log('Server running at http://127.0.0.1:3001/');
