vue-ssr服务端渲染简单例子

一、什么是服务器端渲染(SSR)？
就是在服务端拼接好用户请求的静态页面，直接返回给客户端，客户端激活这些静态页面，让他们变成动态的，并且能够响应后续的数据变化。

二、为什么使用服务器端渲染(SSR)？
1、更好的 SEO（SEO是由英文Search Engine Optimization缩写而来， 中文意译为“[搜索引擎优化]），由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

2、产生更好的用户体验，更快的首屏渲染更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。

三、基础使用

• 新建一个文件夹，执行以下命令

$ npm install vue vue-server-renderer --save
$ npm install express --save

生成如下文件夹

image.png

自己新建demo文件里面新建index.html和index.js文件
index.html写上

    
    
        {{{meta}}}


     

index.js中写上

const Vue = require('vue')
const server = require('express')()
const fs = require('fs')

//读取模版
const renderer = require('vue-server-renderer').createRenderer({
    template: fs.readFileSync('./index.html', 'utf-8')
})  
// 此参数是vue 生成Dom之外位置的数据  如vue生成的dom一般位于body中的某个元素容器中，
//此数据可在header标签等位置渲染，是renderer.renderToString()的第二个参数，
//第一个参数是vue实例，第三个参数是一个回调函数。
const context = {
      title: 'Vue-ssr初探',
      meta:`  `
}

server.get('*', (req, res) => {
      //创建vue实例   主要用于替换index.html中body注释地方的内容，
    //和index.html中 的地方是对应的
    const app = new Vue({
        data: {
            url: req.url,
            data: ['加油，你是最胖的'],
            title: '欢迎学习vue-ssr服务端渲染'
        },
        //template 中的文本最外层一定要有容器包裹， 和vue的组件中是一样的，
      //只能有一个父级元素，万万不能忘了！
        template: `
            

                
url : {{url}}
                
{{title}}
                
{{item}}
            
        `
    })

//将 Vue 实例渲染为字符串  (其他的API自己看用法是一样的)
    renderer.renderToString(app, context,  (err, html) => {
        if (err) {
            res.status(500).end('err:' + err) 
            return 
        }
    //将模版发送给浏览器
        res.end(html)
        console.log('http://localhost:8080/')
    })
})

server.listen(8080)

image.png

image.png

打开demo文件夹,运行index.js

node index.js

image.png

打开http://localhost:8080/

image.png

浏览器右键查看源代码

image.png

官方文档https://ssr.vuejs.org/guide/#installation