理解vue ssr原理并自己搭建简单的ssr框架

打包完成后就可以启动服务了，在

start.js

中我们需要把server.js加载进来，然后通过renderToString方法把渲染好的html返回给浏览器

const bundle = fs.readFileSync(path.resolve(__dirname, 'dist/server.js'), 'utf-8');
const renderer = require('vue-server-renderer').createBundleRenderer(bundle, {
 template: fs.readFileSync(path.resolve(__dirname, 'dist/index.ssr.html'), 'utf-8') // 服务端渲染数据
});
server.get('*', (req, res) => {
 renderer.renderToString((err, html) => {
  // console.log(html)
  if (err) {
   console.error(err);
   res.status(500).end('服务器内部错误');
   return;
  }
  res.end(html);
 })
});

效果图

demo已经上传到github：https://github.com/wmui/vue-ssr-demo

结语

个人实践Vue SSR已有一段时间，发现要想搭建一套完整的 SSR 服务框架还是很有挑战的，或许 Nuxt 是一个不错的选择，对 Nuxt 感兴趣的朋友可以参考我的一个开源小作品Essay