大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

vue/vue-cli+express手把教你搭建SSR-创新互联

最近简单的研究了一下SSR,对SSR已经有了一个简单的认知,主要应用于单页面应用,Nuxt是SSR很不错的框架。也有过调研,简单的用了一下,感觉还是很不错。但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下做个笔记。

网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了河池免费建站欢迎大家使用!

什么是SSR


把Vue组件渲染为服务器端的HTML字符串,将他们直接发送到浏览器,最后将静态标记混合为客户端上完全交互的应用程序。

为什么要使用SSR


  • 更好的SEO,搜索引擎爬虫爬取工具可以直接查看完全渲染的页面
  • 更宽的内容达到时间(time-to-content),当权请求页面的时候,服务端渲染完数据之后,把渲染好的页面直接发送给浏览器,并进行渲染。浏览器只需要解析html不需要去解析js。

SSR弊端


  1. 开发条件受限,Vue组件的某些生命周期钩子函数不能使用
  2. 开发环境基于Node.js
  3. 会造成服务端更多的负载。在Node.js中渲染完整的应用程序,显然会比仅仅提供静态文件server更加占用CPU资源,因此如果你在预料在高流量下使用,请准备响应的服务负载,并明智的采用缓存策略。

准备工作


在正式开始之前,在vue官网找到了一张这个图片,图中详细的讲述了vue中对ssr的实现思路。如下图简单的说一下。

下图中很重要的一点就是webpack,在项目过程中会用到webpack的配置,从最左边开始就是我们所写入的源码文件,所有的文件都有一个公共的入口文件app.js,然后就进入了server-entry(服务端入口)和client-entry(客户端入口),两个入口文件都要经过webpack,当访问node端的时候,使用的是服务端渲染,在服务端渲染的时候,会生成一个server-Bender,最后通过server-Bundle可以渲染出HTML页面,若在客户端访问的时候则是使用客户端渲染,通过client-Bundle在以后渲染出HTML页面。so~通过这个图可以很清晰的看出来,接下来会用到两个文件,一个server入口,一个client入口,最后由webpack生成server-Bundle和client-Bundle,最终当去请求页面的时候,node中的server-Bundle会生成HTML界面通过client-Bundle混合到html页面中即可。

对于vue中使用ssr做了一些简单的了解之后,那么就开始我们要做的第一步吧,首先要创建一个项目,创建一个文件夹,名字不重要,但是最好不要使用中文。

mkdir dome
cd dome
npm init

网站名称:vue/vue-cli+express手把教你搭建SSR-创新互联
URL地址:http://dzwzjz.com/article/diohii.html
在线咨询
服务热线
服务热线:028-86922220
TOP