现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如角,反应和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据,由于单页面应用读取到的页面是几乎空白的,无法爬取到任何数据信息。
如上代码,单页面应用查看源代码的时候如上所示,所以搜索引擎无法爬取到任何信息,搜索引擎会认为当前页面为一个空页面。为了解决SEO问题,推出了SSR服务端预渲染,以便提高对SEO优化。
在认识SSR之前,首先对企业社会责任与SSR之间做个对比。
首先看一下传统的网络开发,传统的网络开发是,客户端向服务端发送请求,服务端查询数据库,拼接HTML字符串(模板),通过一系列的数据处理之后,把整理好的HTML返回给客户端,浏览器相当于打开了一个页面。这种比如我们经常听说过的jsp、PHP、aspx也就是传统的MVC的开发。
温泉应用,到了Vue,反应,单页面应用优秀的用户体验,逐渐成为了主流,页面整体式javaScript渲染出来的,称之为客户端渲染CSR.SPA渲染过程。由客户端访问网址发送请求到服务端,返回HTML结构(但是温泉的返回的HTML结构是非常的小的,只有一个基本的结构,如第一段代码所示)。客户端接收到返回结果之后,在客户端开始渲染HTML,渲染时执行对应的javaScript,最后渲染模板,渲染完成之后,再次向服务端发送数据请求,注意这里时数据请求,服务端返回json格式数据。客户端接收数据,然后完成最终渲染。
温泉虽然给服务器减轻了压力,但是也是有缺点的:
-
<李>首屏渲染时间比较长:必须等待JavaScript加载完毕,并且执行完毕,才能渲染出首屏。
<李> SEO不友好:爬虫只能拿到一个div元素,认为页面是空的,不利于SEO。
为了解决如上两个问题,出现了SSR解决方案,后端渲染出首屏的DOM结构返回,前端拿到内容带上首屏,后续的页面操作,再用单页面路由和渲染,称之为服务端渲染(SSR)。
SSR渲染流程是这样的,客户端发送URL请求到服务端,服务端读取对应的URL的模板信息,在服务端做出html和数据的渲染,渲染完成之后返回html结构,客户端这时拿到的之后首屏页面的html结构,所以用户在浏览首屏的时候速度会很快,因为客户端不需要再次发送ajax请求。并不是做了SSR我们的页面就不属于温泉应用了,它仍然是一个独立的温泉应用。
SSR是处于CSR与温泉应用之间的一个折中的方案,在渲染首屏的时候在服务端做出了渲染,注意仅仅是首屏,其他页面还是需要在客户端渲染的,在服务端接收到请求之后并且渲染出首屏页面,会携带着剩余的路由信息预留给客户端去渲染其他路由的页面。
在Nuxt官方网站有一句这样的话:Nuxt.js预设了使您开发Vue.js应用程序所需的所有配置.Nuxt是一个基于Vue.js的通用应用框架。通过对客户端/服务端基础框架的抽象组织,Nuxt主要关注的是应用的ui渲染。
通过上面的这些介绍可以简单的得出:
-
<李> Nuxt不仅仅用于服务端渲染也可以用于温泉应用的开发
<李>利用Nuxt提供的项目结构,异步数据加载,中间件的支持,布局等特性可大幅提升开发效率
<李> Nuxt可用于网站静态化,可以使用命令将整个网页打包成静态页面,使搜索引擎优化更加友好李
-
<李>基于Vue李
<李>自动代码分层
<李>服务端渲染李
<李>强大的路由功能,支持异步数据李
<李>静态文件服务李
<李> EcmaScript6和EcmaScript7的语法支持
<李>打包和压缩JavaScript和Css李
<李> HTML头部标签管理李
<李>本地开发支持热加载李
<李>集成ESLint李
<李>支持各种样式预编译器SASS,少等等李
<李>支持HTTP/2推送
李
一个完整的服务器请求到渲染的流程
