理解vue ssr原理并自己搭建简单的ssr框架 - 行业资讯 - 肥雀云

大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对WEB应于用来说,搜索引擎是一个很大的流量入口.Vue SSR现在已经比较成熟了,但是如果是把一个水疗应用改造成SSR应用,成本还是有些高的,这工作量无异于重构前端。另外对前端的技术要求也是挺高的,需要对Vue比较熟悉,还要有节点。js和webpack的应用经验。

Vue是一个构建客户端应用的框架,即Vue组件是在浏览器中进行渲染的。所谓服务端渲染,指的是把Vue组件在服务器端渲染为组装好的HTML字符串,然后将它们直接发送到浏览器,最后需要将这些静态标记“激活”为客户端上完全可交互的应用程序。

服务端渲染的优点

　　<李>更好的SEO,搜索引擎爬虫可以抓取渲染好的页面李　　<李>更快的内容到达时间(首屏加载更快),因为服务端只需要返回渲染好的HTML,这部分代码量很小的,所以用户体验更好李　　　　

服务端渲染的缺点

　　<李>首先就是开发成本比较高,比如某些声明周期钩子函数(如beforeCreate,创建)能同时运行在服务端和客户端,因此第三方库要做特殊处理,才能在服务器渲染应用程序中运行。　　<李>由于服务端渲染要用Nodejs做中间层,所以部署项目时,需要处于节点。js服务器运行环境。在高流量环境下,还要做好服务器负载和缓存策略李　　　　

先附上演示地址:https://github.com/wmui/vue-ssr-demo

<强>第一步:编写entry-client.js和entry-server.js

entry-client.js只在浏览器环境下执行,所以需要显示调用美元山方法,挂载DOM节点

　　　　　　从“进口Vue Vue '; 　　从“进口程序。/App.vue '; 　　从“进口createStore。/存储/index.js '; 　　　　函数createApp () { 　　常量存储=createStore (); 　　const应用=new Vue ({ 　　商店, 　　呈现:h=比;h(应用) 　　}); 　　返回{应用、存储} 　　} 　　　　const{应用、存储}=createApp ();//使用window.__INITIAL_STATE__中的数据替换整个州中的数据,这样服务端渲染结束后,客户端也可以自由操作状态中的数据　　如果(window.__INITIAL_STATE__) { 　　store.replaceState (window.__INITIAL_STATE__); 　　} 　　　　应用。美元山(“#应用”); 　　　　

entry-server.js需要导出一个函数,在服务端渲染期间会被调用

　　　　　　从“进口Vue Vue '; 　　从“进口程序。/App.vue '; 　　从“进口createStore。/存储/index.js '; 　　　　出口的默认函数(上下文){//背景是上下文对象　　常量存储=createStore (); 　　让应用程序=new Vue ({ 　　商店, 　　呈现:h=比;h(应用) 　　});//找到所有asyncData方法　　让组件=App.components; 　　让asyncDataArr=[];//保证集合　　(让关键组件){ 　　如果(! components.hasOwnProperty(键))继续; 　　让组件=组件(例子); 　　如果(component.asyncData) { 　　asyncDataArr.push (component.asyncData({商店}))//把商店传给asyncData 　　} 　　}//所有请求并行执行　　返回Promise.all (asyncDataArr)(()=比;{//上下文。状态赋值成什么,窗口。__INITIAL_STATE__就是什么//这下你应该明白entry-client.js中window.__INITIAL_STATE__是哪来的了,它是在服务端渲染期间被添加进上下文的　　上下文。状态=store.state; 　　返回应用程序; 　　}); 　　}; 　　　　

上面的asyncData是干嘛用的?其实,这个函数是专门请求数据用的,你可能会问请求数据为什么不在<代码> beforeCreate> 中创建完成,还要专门定义一个函数?虽然<代码> beforeCreate 和<代码> 创建在服务端也会被执行(其他周期函数只会在客户端执行),但是我们都知道请求是异步的,这就导致请求发出后,数据还没返回,渲染就已经结束了,所以无法把Ajax返回的数据也一并渲染出来,因此需要想个办法,等到所有数据都返回后再渲染组件

asyncData需要返回一个承诺,这样就可以等到所有请求都完成后再渲染组件。下面是在foo组价中使用asyncData的示例,在这里完成数据的请求

　　　　　　出口默认{ 　　asyncData:函数({商店}){ 　　返回store.dispatch (GET_ARTICLE)//返回承诺　　}，　　计算:{ 　　文章(){ 　　返回这个。store.state.article美元　　} 　　} 　　} 　　　　

<强>第二步:配置webpack

webpack配置比较简单,但是也需要针对客户端和服务器端单独配置