大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
最近简单的研究了一下SSR,对SSR已经有了一个简单的认知,主要应用于单页面应用,Nuxt是SSR很不错的框架。也有过调研,简单的用了一下,感觉还是很不错。但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下做个笔记。
网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了河池免费建站欢迎大家使用!什么是SSR
把Vue组件渲染为服务器端的HTML字符串,将他们直接发送到浏览器,最后将静态标记混合为客户端上完全交互的应用程序。
为什么要使用SSR
SSR弊端
准备工作
在正式开始之前,在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