什么是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进行测试

 

Logo

前往低代码交流专区

更多推荐