当前位置:首页 > 博客 >vue > 正文

vue的SSR理解以及例子(一)

时间:2019-01-08 20:27   作者:admin   点击:

项目背景:之前公司因业务做服务端渲染,由于时间很紧,又不是很了解就直接用了官网推荐的Nuxt.js来处理了。但是用的过程中其实发现很多不理解的地方,官网的文档也不是很清楚。当时用它是因为他和vue单页项目很类似,能很平滑过渡,上手是比较快的了(可以参考我上一篇nuxt)

一、服务器渲染原理及需求

  1. 为啥需要服务端渲染?

    a.其实我们公司主要是因为需要做推广,也就是seo。之前他们都是前端写静态页面,后端php直接套页面。没有前后端分离。

    b.相对单页应用来说,他的响应速度会更快,白屏更短

  2. vue或者react的服务端渲染原理是?

    我其实最开始了解都是react的版本,了解它的渲染原理。后来发现,vue的原理基本也是一样的。

    我之前想的过程大概是这样:


     浏览器访问---->服务器(node)先去访问这个路由,把这个路由对应的html返回给浏览器---->用户看到界面              ??


      我当时认为其实也没啥难的,这应该就是他的底层实现。可能很多大佬已经开始耻笑我了。请原谅我的无知


      上面的问题很明显,就是如何实现js的事件绑定,因为直接这样的话,其实是没有事件的。当然它原本的实现也比我说的一句话复杂得多,其实他的渲染是这样的:


      浏览器访问---->服务器(node)先去访问这个路由,把这个路由对应的html返回给浏览器(vue-server-renderer---->客户端去激活这些事件(也就是运行单页应用)---->用户看到界面     

      

      如何去激活这些事件?

      因为去激活那些事件,就只能将应用打包成单页应用,我们不可能写两套代码,把那些事件剔除来,然后客户端单独去执行(我感觉也是一个思路,但是这样成本可能太高,后期可以探究下这个方案,用webpack去做这部分),因为是同一套代码实现的。其实我感觉vue的官网说得很不仔细吧。或者是我理解能力太差,我在看react的介绍之前,看过几次vue的ssr介绍。很难看明白,因为他一上来就是直接拿代码给你说,对他的原理说得不是很清楚(个人感觉)。

     由于需要去激活这些事件,那么我们就还是需要打包成客户端代码。但是由于我们要实现服务端渲染,所以有需要打包一个服务端包。完整的流程图: 

     

    接下来我们开始代码之旅吧!