在vue项目中实现SSR(服务端渲染)
SSR也被叫做服务端渲染,就是将vue中客户端渲染HTML的过程放在服务端实现,然后再把渲染好的HTML内容返回给客户端。
·
什么是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进行测试
更多推荐
已为社区贡献2条内容
所有评论(0)