在vue项目中实现SSR(服务端渲染)

什么是SSR?

SSR也被叫做服务端渲染，就是将vue中客户端渲染HTML的过程放在服务端实现，然后再把渲染好的HTML内容返回给客户端。

SSR的优势和缺点

优势：更利于搜索引擎优化，首屏加载速度更快

缺点：

1.开发条件受限，服务端渲染时只支持beforeCreate和create两个钩子函数

2.当需要对一些外部拓展库进行特殊处理时，服务端渲染应用程序也需要处于Node.js的运行环境中

3.更多服务端渲染

在vue项目中SSR的具体实现

1.首先安装相关依赖

（1）渲染器 ：vue-server-renderer

（2）nodejs服务器：express

 2.创建node.js服务器

（1）在根目录下创建server文件夹，在该文件夹中创建index.js文件

 （2）在index.js中书写nodejs代码

// 创建node.js服务器
const express = require('express')
// 创建vue实例
const Vue = require('vue')

// 创建express实例和vue实例
const app = express()
const page = new Vue({
    template: '<div>你好，我是SSR渲染后返回的内容</div>'
})
// 创建渲染器 将来用渲染器render渲染page可以得到html内容
const renderer = require('vue-server-renderer').createRenderer()

app.get('/', async (req, res) => {
    try {
        const html = await renderer.renderToString(page)
        console.log(html)
        res.send(html);
    } catch (error) {
        res.status(500).send('服务器内部错误！')
    }
})

app.listen(3000,()=>{
    console.log('渲染服务器请求成功')
})

（3）运行已创建好的nodejs服务器

3.在浏览器输入localhost:3000进行测试