2019-11-19

VUE 服务端渲染 简介

SSR（服务端渲染）顾名思义就是将页面在服务端渲染完成后在客户端直接展示。

一. 与客户端渲染的区别

1. 客户端渲染

   • Vue.js构建的应用程序，默认情况下是有一个html模板页，然后通过webpack打包生成一堆js、css等等资源文件。然后塞到index.html中
   • 用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 -> 用户

2. 服务端渲染

   • 用户输入url访问页面 -> 服务端接收到请求 -> 将对应请求的数据渲染完一个网页 -> 返回给用户

二. SSR的优势

1. 客户端渲染
   • 更友好的SEO（搜索引擎爬虫抓取工具可以直接查看完全渲染的页面）。
   • 更快的内容到达时间（首屏加载速度）。

三. SSR的原理

SSR.png

四. 注意事项

1. 由于没有动态更新，所有的生命周期钩子函数中，只有 beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用。这就是说任何其他生命周期钩子函数中的代码（例如 beforeMount 或 mounted），只会在客户端执行。
2. 通用代码不可接受特定平台的 API，因此如果你的代码中，直接使用了像 window 或 document，这种仅浏览器可用的全局变量，则会在 Node.js 中执行时抛出错误，反之也是如此。

四. 如何使用

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `
访问的 URL 是： {{ url }}
`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      
      
        
        ${html}
      
    `)
  })
})

server.listen(8080)