一、服務端渲染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/');
