ssr服务端渲染

学习之前推荐一款非常方便插件nodemon，写完后热更新运行的当前文件。运行命令将node替换成nodemon即可。

1.创建server.js文件，引入依赖包

var http = require('http')
var vue = require('Vue')
var serverRenderer = require('vue-server-renderer')

2.创建vue实例

var app = new Vue({
    template: `<div>
        <my-component/>        
    </div>`,
    components: {
        myComponent: {
            template: `<div>this is ssr !!!</div>`
        }
    }
})

3.创建Renderer实例

var renderer = serverRenderer.createRenderer()

4.将Vue实例转化成HTML字符串
我们先可以打印html看看

renderer.renderToString(app,function(err,html){
    console.log(html) // html 将是注入应用程序内容的完整页面
})

结果：

<div data-server-rendered="true"><div>this is ssr !!!</div></div>

对renderer.renderToString进行改造如下

httt.createServer((req, res) => {
  renderer.renderToString(app,(err,html) => {
      res.end(`<!DOCTYPE html>
                    <html lang="en">
                    <head>
                          <meta charset="UTF-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <meta http-equiv="X-UA-Compatible" content="ie=edge">
                          <title>Document</title>
                  </head>
                  <body>
                      ${html}
                  </body>
                  </html>`)
        })
}).listen(3000)

5.将html模板给提取出来，虽然这样写也可以，但是看起来不简洁，先改造server.js

// 改造第三步，nodeJS的FS模块同步读取文件
var renderer = serverRenderer.createRenderer({
      template: require('fs').readFileSync('./index.template.html','utf-8');
})；
// 改造第四步
http.createServer((req, res) => {
    renderer.renderToString(app,function (err, html) {
        res.end(html)
    })
}).listen(3000)

6.创建 index.template.html文件，注意这不是注释，这是应用程序将html代码注入的地方，vue-ssr-outlet左右不能有空格，不然会报错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--vue-ssr-outlet-->
</body>
</html>

renderer.renderToString 中第2个参数可以在模版里面init 进去你要添加的标签如下.

http.createServer((req, res) => {
    renderer.renderToString(app, {
        init: `<script>console.log('aaa')</script>`
    }, function (err, html) {
        res.end(html)
    })
}).listen(3000)

index.template.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    {{init}} 
    {{{init}}}
    <!--vue-ssr-outlet-->
</body>
</html>

运行结果：
{{}} => 类似于vue双括号效果，页面显示<script>console.log('aaa')
{{{}}} => '当成代码执行' ，控制台显示aaa

附上server.js代码。

var http = require('http')
var Vue = require('vue')
var serverRenderer = require('vue-server-renderer')
// 创建Vue实例
var app = new Vue({
    template: `<div>
        <my-component/>        
    </div>`,
    components: {
        myComponent: {
            template: `<div>this is ssr !!!</div>`
        }
    }
})
// 创建Renderer实例
var renderer = serverRenderer.createRenderer({
    template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
// 将Vue实例转化为HTML字符串
http.createServer((req, res) => {
    renderer.renderToString(app, {
        init: `<script>console.log('aaa')</script>`
    }, function (err, html) {
        res.end(html)
    })
}).listen(3000)