SSR服务器端渲染技术(一)

先引包

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

//步骤1 创建vue实例

var app = new Vue({
    template:`

        
    
`,
    components:{
        myComponent:{
            template:'
vvvvvvvvvvvvvvv
'
        }
    }
})

//步骤2 创建renderer实例

var renderer = serverRender.createRenderer()

//步骤3 将vue实例转化为 html字符串

renderer.renderToString(app,function(err,html){
    console.log(html)
})

此时输出的结果为（这里只是展示可以转字符串）

Administrator@PC-Liyueran MINGW64 /e/www/WWWWWW/ssrDemo
$ node demo.js
vvvvvvvvvvvvvvv

//步骤4 将VUE实例的字符串输出到服务器

//步骤4  将VUE实例的字符串输出到服务器
http.createServer((req,res)=>{  
    //步骤3  将vue实例转化为 html字符串
    renderer.renderToString(app,function(err,html){
        console.log(html)
        res.end(`
        
        
            
            
            
            
        
        
            ${html}
            
wowoow
        
        `)
    })   
}).listen(3000);

完整例子代码如下：

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

//步骤1 创建vue实例
var app = new Vue({
    template:`

        
    
`,
    components:{
        myComponent:{
            template:'
vue实例
'
        }
    }
})
//步骤2 创建renderer实例
var renderer = serverRender.createRenderer()


//步骤4  将VUE实例的字符串输出到服务器
http.createServer((req,res)=>{  
    //步骤3  将vue实例转化为 html字符串
    renderer.renderToString(app,function(err,html){
        console.log(html)
        res.end(`
        
        
            
            
            
            
        
        
            ${html}
            
wowoow
        
        `)
    })   
}).listen(3000);

这样把字符串都放在node里面不是很好，所以把template 写出去。

-------------------------------------------------------------------------------------------------------------

createrender 里面  可以 通过FS模块读取template 模版，那么我们可以新建一个html来存放之前的template,

//步骤2 创建renderer实例
var renderer = serverRender.createRenderer({
    template:require('fs').readFileSync('./index.template.html','utf-8')
})


//步骤4  将VUE实例的字符串输出到服务器
http.createServer((req,res)=>{  
    //步骤3  将vue实例转化为 html字符串
    renderer.renderToString(app,function(err,html){
        console.log(html)
        res.end(html)
    })   
}).listen(3000);

template 代码如下   需要注意的是要添加一个      这个是表示vue实例里面的东西可以插入到这个地方

中间不要写空格 ，否则报错

----------------------------------------------------------------------------------------------------------------------

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

我init进入了script标签

//步骤4  将VUE实例的字符串输出到服务器
http.createServer((req,res)=>{  
    //步骤3  将vue实例转化为 html字符串
    renderer.renderToString(app,{
        init:``
    },function(err,html){
        console.log(html)
        res.end(html)
    })   
}).listen(3000);

在template模版中加了｛｛｝｝和｛｛｛｝｝｝  2个括号和3个括号 

其中2个括号就会转译成字符串     3个括号直接执行。

    
    
    
    


    {{init}}
    {{{init}}}
    

完整代码  那个index.template.html 模版我就不复制了，如上

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

//步骤1 创建vue实例
var app = new Vue({
    template:`

        
    
`,
    components:{
        myComponent:{
            template:'
vue实例
'
        }
    }
})
//步骤2 创建renderer实例
var renderer = serverRender.createRenderer({
    template:require('fs').readFileSync('./index.template.html','utf-8')
})


//步骤4  将VUE实例的字符串输出到服务器
http.createServer((req,res)=>{  
    //步骤3  将vue实例转化为 html字符串
    renderer.renderToString(app,{
        init:``
    },function(err,html){
        console.log(html)
        res.end(html)
    })   
}).listen(3000);