SSR服务端渲染

1. 客户端渲染

1. 需要一个模板文件HTML（搭建好基础的结构，但是还没有数据）
2. 在框架vue的created声明周期去请求接口数据，一般是json类型的数据
3. 浏览器把数据（图片，文字等内容）插入到模板template当中
4. 浏览器渲染

类似于淘宝官网，下图中的轮播图，推荐搜索，商品详情肯定是动态数据，那么一定是通过接口来调用的，假如按照传统的客户端渲染模式，基本结构–>请求数据–>浏览器渲染，那么涉及到大量数据的时候，渲染速度是非常慢的

2. 优化首屏渲染的方法

1. 懒加载
2. 压缩http请求体积，减少请求次数
3. 图片格式的合理选择(png,jpg,base64)
4. 时间分片，虚拟列表
5. …
6. 这里重点介绍一下服务端渲染

3. SSR服务端渲染

1. 定义

客户端渲染的痛点是，需要客户端自己去请求接口数据，自己把数据插入到模板中，然后浏览器再渲染
假如把json数据插入到模板这一个步骤交给服务器来做呢？服务器直接返回一个html文件回来，然后浏览器直接渲染就行了

2. 好处

• 提高首页加载的速度（因为模板数据替换的动作由后端来完成，前端能够直接拿到后端替换好的html)

• 利于SEO(搜索引擎优化（seo），百度搜索利用爬虫，如果我们网页的内容和用户搜索的内容匹配度很高，那么会优先展示)
  eg：比如我们的网站名字叫做新浪微博
  假如用户搜索了目前新浪热搜排行榜的某个词条《斯琴高娃老师打了羊胎素了》，那么也应该把新浪微博这个网站给展示出来，但问题是，羊胎素并不一定是写死在页面里的，今天和明天的热搜榜内容也肯定是不一样的，是通过ajax获取过来的数据，而百度的爬虫系统更优先地去爬静态的数据,也就是写死在html里的
  那么假如是服务器渲染，返回的就是一个html页面，里面的内容都订好了，那么百度的爬虫更好爬取
  但其实给百度直接打钱更实际…

3. 使用场景

其实SSR一般只用于首页优化，对于访问频率特别特别高的页面才服务器渲染，因为纯前端渲染更能做到前后端分离开发，不刷新页面，给用户的体验也好（具体可以见博客SPA）

4. vue+SSR案例

SSR并不是纯后端的事情，其实是和前端息息相关的
eg:vue+前端nodeJs写的中间服务器+后端写的服务器

搭建一个node服务器，目录结构如下：

在index.js文件中：

const Vue = require('vue')
const express = require('express')
const fs = require('fs')
const server = express()
//读取模版,初始化渲染对象
const renderer = require('vue-server-renderer').createRenderer({
    template: fs.readFileSync('./index.html', 'utf-8')
})
// context参数是vue生成Dom之外位置的数据,比如head标签里面，vue生成的dom一般位于body中的某个元素容器中，
//此数据可在header标签等位置渲染，是renderer.renderToString()的第二个参数，
const context = {
    title: 'Vue-ssr初探',
}
server.get('/login', (req, res) => {
    //创建vue实例   主要用于替换index.html中body注释地方的内容，
    //和index.html中 <!--vue-ssr-outlet-->的地方是对应的，这个注释不可以删
    const app = new Vue({
        data: {
            url: req.url,
            data: ['加油', "测试"],
            title: '学习vue-ssr服务端渲染'
        },
        //template 中的文本最外层一定要有容器包裹， 和vue的组件中是一样的，只能有一个父级元素，万万不能忘了！
        template: `
            <div>
                <div>url : {{url}}</div>
                <p>{{title}}</p>
                <p v-for='item in data'>{{item}}</p>
            </div>
        `
    })
    //将 Vue 实例渲染为字符串  (其他的API自己看用法是一样的)
    // 参1： vue实例对象
    // 参2： 给模板传入的数据
    // 参3： 渲染结束的回调，可以拿到最终渲染的html字符串
    renderer.renderToString(app, context, (err, html) => {
        if (err) {
            res.status(500).end('err:' + err)
            return
        }
        res.end(html)  //将模版发送给浏览器
    })
})
server.listen(8080, () => {
    console.log("server running at http://127.0.0.1:8080")
})

启动服务器：

效果如下：本案例的数据也是在data配置项里固定写死的，其实可以通过调用后端接口获得灵活的数据，把nodejs作为一个中间服务器即可