vue服务端渲染

作者: meng_281e | 来源:发表于2020-01-17 16:47 被阅读0次

本期小结（二）
前端性能优化之 DOM 篇 - 关人潮的博客 | FSUX Bl
2019-11-19
服务端渲染SSR（Server Side Rendering）
vue用法指南05(vue服务端渲染详解)
vue ssr 服务端渲染
Egg + Vue/Nunjucks 服务端渲染性能测试
前端Vue学习
Vue-服务器端渲染（SSR）
第一个vue项目总结

一、什么是服务器端渲染(SSR)？

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

二、为什么使用服务器端渲染(SSR)？

1、更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
2、产生更好的用户体验，解决首页加载慢（一次性返给客户端，减少http请求）。

三、基础使用

新建一个文件夹，执行以下命令（安装vue服务端、node框架express）

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
  </head>
  <body>
    <!--vue-ssr-outlet--> <!--注意：这是注入应用程序标记的位置。-->
  </body>
</html>

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:` <meta name="viewport" content="width=device-width, initial-scale=1" /> `
}

server.get('*', (req, res) => {
    //创建vue实例   主要用于替换index.html中body注释地方的内容，
    //和index.html中 <!--vue-ssr-outlet-->的地方是对应的
    const app = new Vue({
        data: {
            url: req.url,
            data: ['加油，你是最胖的'],
            title: '欢迎学习vue-ssr服务端渲染'
        }, 
        template: `
            <div>
                <div>url : {{url}}</div>
                <p>{{title}}</p>
                <p v-for='item in data'>{{item}}</p>
            </div>
        `
    })

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

server.listen(8080)