前言
服务端渲染也称作 SSR(Server Side Render) 。不同于客户端渲染，服务端渲染会在后端把页面 DOM 的结构树转成 String 吐出来，然后到前端（如浏览器）解析渲染。
node作为中间件
其中客户端请求网页后，node服务向后端业务接口请求数据。因为是服务端通信，比浏览器请求要快得多。最后拿到数据后去找对应模板结合生成字符串给客户端，用户直接看到的就是结合好数据后的页面展示。
特点
- 前后端依旧分工明确
- SEO：因为直接展现的是完整的页面，方便爬虫抓取页面关键词
- 首屏直出：减少了浏览器获取到页面资源再首次请求获取业务数据的等待时间。
技术选型
Node框架：考虑要做什么，团队人员能力习惯，框架特点
- express node第一代框架、社区文档齐全适合新手入门
- koa 轻量，剔除了路由模块，大量使用async异步函数书写顺手
-
egg 企业级、重
等等
视图模板：性能，支持性，个人喜好
- pug(jade)
- handlebars
- art-template
- ejs
等等
其他工具
react 体系下比较有代表性的next.js
vue 体系下的Nuxt.js
工具类库等等
简易DEMO
app.js
//配置和核心模块引入
const express = require('express');
const app = express();
const router = require('./src/router/router.js');
//配置静态文件地址
app.use(express.static('./static'));
//设置模板引擎
app.engine('art', require('express-art-template'));
app.set('views','./src/views');
app.use('/',router);
app.listen(3300);
router.js
var express = require('express');
var router = express.Router();
var index = require('./controll/index.js');
var json1 = require('./controll/json1.js');
router.get('/',index);
router.get('/json1',json1);
module.exports = router;
index.js
var request = require('request');
function index(req, res) {
request({
url: 'http://localhost:3000/',
methods: 'GET'
}, function(error, response, body) {
if (!error && response.statusCode == 200) {
try {
var data = JSON.parse(body);
res.render('./index.art', data);
} catch (e) {
throw e
}
}
})
// res.render('./index.art');
}
module.exports = index;
解析：
- 在app.js中引入express框架，配置路由，引入模板引擎
- 在router.js路由文件中配置路由，引入相应的路由文件
- 在index.js文件中对requset与response做处理。例如案例中我们通过请求服务端拿到的数据通过
res.render('./index.art', data)将数据插入实现配置好的模板中 - 浏览器打开localhost:3300访问index页面直接看到的就是插入数据后的页面
仍然存在的难点
- 服务器 cpu 过高问题。因为现在页面结构是在服务端以
renderToString的方式输出，所以页面请求路由会涉及到大量的计算。这就会导致如果页面并发高一点的话，会出现 cpu 过高的问题。 - 在服务端没有 window 、 document 对象，这些东西也需要去 hook 掉；在 React 应用中，componentDidMount 等生命周期函数也不会在服务端触发；定时器记得及时释放，否则可能会导致内存泄露的风险。
- 提高了开发人员的要求，要熟悉前后端知识。
如果要用 node 做服务端渲染的话，不妨选择用一些开源成熟的框架。比如在 react 体系下比较有代表性的next.js，vue 体系下的Nuxt.js
