nodejs学习笔记——服务端渲染简易尝试

前言

服务端渲染也称作 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;

解析：

1. 在app.js中引入express框架，配置路由，引入模板引擎
2. 在router.js路由文件中配置路由，引入相应的路由文件
3. 在index.js文件中对requset与response做处理。例如案例中我们通过请求服务端拿到的数据通过res.render('./index.art', data)将数据插入实现配置好的模板中
4. 浏览器打开localhost:3300访问index页面直接看到的就是插入数据后的页面

---

仍然存在的难点

• 服务器 cpu 过高问题。因为现在页面结构是在服务端以 renderToString 的方式输出，所以页面请求路由会涉及到大量的计算。这就会导致如果页面并发高一点的话，会出现 cpu 过高的问题。
• 在服务端没有 window 、 document 对象，这些东西也需要去 hook 掉；在 React 应用中，componentDidMount 等生命周期函数也不会在服务端触发；定时器记得及时释放，否则可能会导致内存泄露的风险。
• 提高了开发人员的要求，要熟悉前后端知识。

如果要用 node 做服务端渲染的话，不妨选择用一些开源成熟的框架。比如在 react 体系下比较有代表性的next.js，vue 体系下的Nuxt.js

---

参考

node服务端渲染(完整demo)
关于Node服务端渲染-前端