ssr原理

一 什么是SSR

传统的VUE是纯浏览器渲染。

传统VUE工作过程，npm run build 后产生app.js,index.html和css等文件。浏览器请求网站的时候，服务器将这些文件返回给浏览器，html文件里没有实质内容，只是加载了JS，实际浏览器执行返回的JS文件才生成网站。这便是纯浏览器渲染。

这种渲染有以下问题：1.不利于SEO（爬虫只能爬html，不能爬JS），2.首屏过慢，3.浏览器负担过重。

SSR说白了就是把我们打包的那些JS，html在我们的服务器执行后，把生成的页面返回到浏览器。

二 VUE-SSR

特性：

1.每次访问都是创建一个VUE实例 ，用vue-server-render(核心库，通过npm下载即可)

2.因为在服务端渲染 所以只会出发beforeCreate 和 create两个钩子，mounted这些钩子需要客户端，即浏览器触发

例子:

const vue = require("vue")

const app = new vue({
    template:`<div>hello {{num }}</div>`,
    data:{
        num:123
    }
})

const render =  require("vue-server-renderer").createRenderer();
render.renderToString(app).then(html => {
    console.log(html)
})

执行后：

可以看到 num被渲染出来了。

三 NUXT