概述
服务器渲染 (Server Side Render)
- SSR是什么？
简单理解就是，服务器返回浏览器的是一个包裹数据与结构的完整的HTML页面 - 为什么要用SSR?
因为现在是SPA（Single Page Application 单页面应用）风靡的时代，
优点很多：
1.前后端数据分离、操作数据，通过框架将数据渲染到DOM中，
2.践行前端开发一直向往的低耦合、高聚合的模块化开发，提高复用性
...
不足：
因为采用了SPA模式开发，页面在浏览器渲染开始，没有太多实际内容，
body中基本为一个id为app的空DOM节点，
这是不利于浏览器SEO的，通过SSR可以解决这个问题
服务器渲染(SSR)与浏览器渲染的差异
- 服务端渲染
1.从后台直接输出html标签加数据到浏览器
2.数据是在后台操作，逻辑不可见，安全性高
3.请求整个结构+数据 消耗流量
4.需要刷新页面
5.对SEO抓取更有利
- 客户端渲染
1.从后台获取数据，然后对数据进行处理（利用框架渲染数据到页面）
2.数据请求过来，暴露请求的信息，安全性低
3.请求只有数据，节约流量
4.不需要刷新页面
5.不利于SEO，数据来自于后台
- 针对项目中页面，怎么选择渲染方式
服务器渲染（安全性要求高，流量方面：访问不频繁）：
注册，登录
浏览器渲染 (用户体验要求高，需要节约流量)
展示类
基于NODE的SSR框架选择
1.pug
-- (侵入式框架)脱离框架，结构不能在其他地方使用
安装：
cnpm install pug -D
2.ejs
-- (非侵入式框架) 有利于后续二次开发（如果要更换框架，维护成本低）
安装：
cnpm install ejs -D
推荐使用ejs
1.学习成本低 --- 因为它是非入侵的，处理方式类似于字符串拼接，
只需要将变量部分使用<%内容%>包裹起来，其他部分和书写HTML一样
2.重写成本低 --- 如果需要更换其他方式，日后重写，成本会低一些
pug的使用
模板书写格式：
meta(charset="utf-8") //书写属性
script(type="text/javascript"). //书写JS块
h2= data1 //获取变量，并插入
each item in data2 //循环数据到item
server.js
const pug = require('pug');
pug.renderFile('./template/1.pug',{
pretty:true, //开发模式，方便阅读，开启美化；生产时候需要关闭
data1:"列表",
data2:[
{"name":"a","sex":"man"},
{"name":"b","sex":"man"},
{"name":"c","sex":"woman"},
{"name":"d","sex":"man"}
]
},(err,data)=>{
if(err){
console.log('错误',err);
}else{
console.log(data);
}
})
template/1.pug
doctype
html
head
meta(charset="utf-8")
title 首页
script(type="text/javascript").
window.onload = function(){
var a = 1;
var oBox = document.getElementById('box');
oBox.onclick = function(){
alert(a);
}
}
body
div
h2= data1
ul
each item in data2
li(class="list_li")
span= item.name
span= item.sex
h6(id="box") 点击我
书写注意：
pug模板通过空格来实现层级嵌套，空格数量尽量保持一致
pug渲染
ejs的使用
模板的书写格式：
<%=dateTime%> //获取变量值，插入到这里
-%> //删除结尾换行
<% include common.ejs %> //调用模板结构
server.js
const ejs = require('ejs');
ejs.renderFile('./template/1.ejs',{
"data1":'hello',
"arr":['one','two','three']
},(err,data)=>{
if(err){
console.log('错误',err);
}else{
console.log(data);
}
});
template/1.ejs
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
</head>
<body>
<!--模板引入 这个是ejs独有的-->
<% include common.ejs %>
<div><%=data1%></div>
<ul>
<%for(var i=0;i<arr.length;i++){-%>
<li><%=arr[i]%></li>
<%}-%>
</ul>
<!--显示时间-->
<%let dateTime = new Date().toTimeString()%>
<h6><%=dateTime%></h6>
</body>
</html>
common.ejs
<div>我是公用部分</div>
渲染结果：
ejs渲染
基于KOA2的ejs
安装 koa-ejs：
cnpm install koa-ejs -D
安装 koa 套装：
cnpm install koa koa-router koa-static -D
server.js
const Koa = require('koa');
const ejs = require('koa-ejs');
const path = require('path');
let server = new Koa();
server.listen(8080);
ejs(server,{
root:path.resolve(__dirname,'template'), //路径，当前文件夹下的template
layout:false, //嵌套一层template
viewExt:'ejs', //后缀名
cacahe:false, //缓存开启
debug:false //调试信息
});
server.use(async (ctx,next)=>{
await ctx.render('1',{
data1:'hello', //koa-ejs中使用的数据
arr:[1,2,34] //koa-ejs中使用的数据
}); //渲染后会自动放到 ctx.body 中
})
template/1.ejs
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
</head>
<body>
<!--模板引入 这个是ejs独有的-->
<% include common.ejs %>
<div><%=data1%></div>
<ul>
<%for(var i=0;i<arr.length;i++){-%>
<li><%=arr[i]%></li>
<%}-%>
</ul>
<!--显示时间-->
<%let dateTime = new Date().toTimeString()%>
<h6><%=dateTime%></h6>
</body>
</html>
common.ejs
<div>我是公用部分</div>
渲染结果：
koa-ejs渲染结果
网友评论