浅谈vue服务器端渲染

运气男孩 发表于 2021/02/25 14:30:20 2021/02/25
【摘要】 SSR是什么?什么要用SSRSSR是 Server-Side Rendering(服务器端渲染)的缩写,简单的理解就是将原本在浏览器上渲染编译的组件、页面,现在通过服务器编译html字符串,发送到浏览器,最后将静态标记,混合为客户端上交互的应用程序。(1)解决SEO的问题当百度搜索引擎爬虫爬取的时候,通过URL产生对服务器的请求,服务器根据URL,相应页面,因此百度就获取到了我们的站点的数据...

SSR是什么?什么要用SSR

SSR是 Server-Side Rendering(服务器端渲染)的缩写,简单的理解就是将原本在浏览器上渲染编译的组件、页面,现在通过服务器编译html字符串,发送到浏览器,最后将静态标记,混合为客户端上交互的应用程序。

(1)解决SEO的问题

当百度搜索引擎爬虫爬取的时候,通过URL产生对服务器的请求,服务器根据URL,相应页面,因此百度就获取到了我们的站点的数据。

(2)一定程度解决了SPA程序首屏白屏的问题。在首屏刷新的时候,通过后端计算并模版渲染,再将html相应给客户端,省去了浏览器端首次渲染的时间。(当然在服务端渲染增加了服务端的压力)

image.png

image.png

SSR

SSR框架

(1)Angular SSR框架 Angular Universal

(2)ReactSSR框架Next.js

(3)Vue SSR框架nuxt.js

Vue SSR原理

原理:相当于服务端前面加了一层url分配,可以假想为服务端的中间层,当地址栏url改变或者直接刷新,其实直接从服务器返回内容,是一个包含内容部分的html模板,是服务端渲染而在交互过程中则是ajax处理操作,局部刷新,首先是在history模式下,通过history. pushState方式进而url改变,然后请求后台数据服务,拿到真正的数据,做到局部刷新,这时候接收的是数据而不是模板。


 基于Vue进行SSR改造

1、拆分js入口,前端和后端入口(entry-clientjs、entry-server.js)

  • entry-client.js在浏览器端执行,所以需要指定el并且显式调用$mount方法,以启动浏览器的渲染。

  • entry-server.js在服务端被调用,因此需要导出为一个函数。

2、拆分Webpack打包配置

  • webpack打包vue.config.js

  • 安装cross-env

  • npmicross-6

  • npmilodash.merge--save-dev

  • ckage.j

  • " build : client " : " vue-cli-service build "

  • "build:server":"cross-env WEBPACK_TARGET=node vue-cli-service build"

3、编写服务端渲染主体逻辑

    Vue SSR依赖于包vue-server-render,它的调用支持两种入口格式:createRenderer和createBundleRenderer,前者以Vue组件为入口,后者以打包后的JS文件为入口。

服务端数据初始化

1、在vue渲染前,预先获取所有的数据,存储到vuex的store中

2、后端渲染时,通过vuex将获取的数据注入到相应的组件中

3、把store中的数据设置到 window._INITIAL_STATE_属性中

4.在浏览器环境中,通过Vuex将window._INITIAL_STATE_注入到

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。