vue ssr 实现方式(学习笔记)

2023-08-31 15:29:04 70

为什么要写本文呢，话说现在vue-ssr官网上对vue服务端渲染的介绍已经很全面了，包括各种服务端渲染框架比如Nuxt.js、集成Koa和vue-server-renderer的node.js框架egg.js，都有自己的官网和团队在维护，文档真是面面俱到功能强大，但是，我个人在刚开始看这些资料的时候，总是忍不住发起灵魂三问：“我是谁？我在哪？我在干什么？”，提前没有相关知识的人开始学这些，肯定是要走一些弯路或者卡在某个点一段时间的，所以我想把我的学习经验做下总结，一方面方便自己以后查阅，一方面也会在文中加一些针对官网上没有细说的点的理解，希望能帮助你减少些学习成本，毕竟这是一个知识共享的时代嘛。本文不涉及到源码解析，主要讲解如何实现vue的服务端渲染，比较适合vue-ssr小白阅读，下面我们进入正文：

先说下基本概念：

ssr的全称是serversiderender，服务端渲染，vuessr的意思就是在服务端进行vue的渲染，直接对前端返回带有数据，并且是渲染好的HTML页面；而不是返回一个空的HTML页面，再由vue通过异步请求来获取数据，再重新补充到页面中。

这么做的最主要原因，就是搜索引擎优化，也就是SEO，这更利于网络爬虫去爬取和收集数据。

为什么这样就有利于网络爬虫爬取呢？

这里简单说一下爬虫的爬取方式，爬虫通过访问URL获取一个页面后，会获取当前HTML中已存在的数据，也可以理解为把拿到的HTML页面转为了字符串内容，然后解析、存储这些内容，但是如果页面中有些数据是通过异步请求获得的，那么爬虫是不会等待异步请求返回之后才结束对页面数据的解析的，这样就会没有爬取到这部分数据，很不利于其他搜索引擎的收录。

这也就是为什么单页面网站是不具备良好的SEO效果的，因为单页面返回的就是一个基本为空的HTML文件，里面就一个带有ID的元素等待挂载而已，页面的内容都是通过js后续生成的，比如这样：



Hello

但对于很多公司来说，公司的产品是希望能被百度、谷歌等搜索引擎收录之后，进行排名，进一步的被用户搜索到，能更利于品牌的推广、流量变现等操作，要实现这些，就必须保证产品的网页是能够被网络爬虫爬取到的，显然一个完整的带有全部数据的页面更利于爬虫的爬取，当然现在也有很多方法可以去实现针对页面异步数据的爬取，github上也开源了很多的爬虫代码，但是这显然对于爬虫来说更加的不友好、成本更高。

SSR当然也是有着其他的好处的，比如首屏页面加载速度更快，用户等待时间更短等，其他更多概念可以查看官网https://ssr.vuejs.org/zh/，这些官网上都有介绍。

代码实现

下面我们结合官网上的代码，做一下代码实操，来加深下理解：

在官网中，提供了一个使用模块vue-server-renderer简单实现vue服务端渲染的示例：

新建一个文件夹vue-ssr-demo，进入其中执行如下命令：

//安装模块
npminstallvuevue-server-renderer--save

创建文件server.js

//vue-ssr-demo/server.js示例代码

//第一步，创建vue实例
constVue=require('vue');
constapp=newVue({
template:"helloworld"
});

//第二步，创建一个renderer
constrenderer=require('vue-server-renderer').createRenderer();
//第三步，将vue渲染为HTML
renderer.renderToString(app,(err,html)=>{
if(err){
throwerr;
}
console.log(html);
});

保存以上代码后，在vue-ssr-demo文件夹下打开命令行工具，执行nodeserver.js命令，可得到如下HTML内容：

➜vue-ssr-demonodeserver.js
helloworld

好，上面的例子中我们已经让vue在服务端，也就是node环境下运行起来了，到这里其实已经实现了vue的服务端渲染了。

可是，实际项目中使用哪有这么简单，起码数据还没渲染啊，那接下来我们看看如何渲染数据：

vue-ssr渲染数据的方式有两种，我们先看下第一种：

//server.js
constdata_vue={
word:'HelloWorld!'
};
//第一步，创建vue实例
constVue=require('vue');
//vue实例化过程中插入数据
constapp=newVue({
data:data_vue,
template:"{{word}}"
});

//第二步，创建一个renderer
constrenderer=require('vue-server-renderer').createRenderer();

//第三步，将vue渲染为HTML
renderer.renderToString(app,(err,html)=>{
if(err){
throwerr;
}
console.log(html);
});

第一种方式，在创建vue实例时，将需要的数据传入vue的模板，使用方法与客户端vue一样；运行server.js结果如下，数据data_vue已经插入到vue模板里面了：

➜vue-ssr-demonodeserver.js
HelloWorld!

这里我们增加了数据data_tpl，你会发现，在renderToString方法中传入了这个参数，那么这个参数作用在哪里呢？这就要看下官网中关于createRenderer和renderToString方法的介绍了，

template:为整个页面的HTML提供一个模板。此模板应包含注释，作为渲染应用程序内容的占位符。
为整个页面的HTML提供一个模板。此模板应包含注释，作为渲染应用程序内容的占位符。

使用双花括号(double-mustache)进行HTML转义插值(HTML-escapedinterpolation)；

使用三花括号(triple-mustache)进行HTML不转义插值(non-HTML-escapedinterpolation)。

根据介绍，在创建renderer实例时，可以通过template参数声明一个模板，这个模板用来干嘛呢？就用来挂载vue模板渲染完成之后生成的HTML。这里要注意一下，当创建renderer实例时没有声明template参数，那么默认渲染完就是vue模板生成的HTML；当创建renderer实例时声明了template参数，一定要在模板中增加一句注释“”作为vue模板插入的占位符，否则会报找不到插入模板位置的错误。

再次运行server.js，结果如下，vue模板已成功插入，且template模板中的{{people}}变量也因在renderToString方法中第二位参数的传入，显示了数据：

vue ssr 实现方式(学习笔记)

热门推荐

随机推荐