浅析Nuxt.js主要作用、应用架构(5步)及其模式选择介绍-SPA路由请求执行流程、Universal模式(SSR渲染执行流程路由请求流程、SSG渲染、SSR与SSG对比)
一、Nuxt 作用
1、Nuxt
其一目的是为了解决单页面应用的SEO
问题,相比于我们平常的 SPA
页面。在搜索引擎中由于无法从网页中被抓取内容信息(SPA页面的信息都是被打包到JS文件中,动态加载到页面中),从而无法被用户所搜索到。
2、其二是服务端渲染相比于SPA页面渲染,在网络环境较差或者客户端运行在没有JavaScript的引擎上,这时基于 SSR渲染
的页面能更好的展现原有的页面的内容,而单页面应用可能就会有很长的空白时间,从而影响到用户的体验。
二、Nuxt 应用架构
1、第一步:客户端先向服务端请求数据
2、第二步:服务端再从API服务器获取数据
3、第三步:服务端返回完整HTML页面给客户端
4、第四步:客户端页面渲染(使用SPA)
5、第五步:此后客户端就直接请求API服务器获取数据,然后使用 SPA 渲染页面
三、模式选择 - SPA/Universal
通过命令行创建项目时,必须在生成 Universal
模式或 SPA
模式应用程序之间进行选择。
模式切换:
// Universal
nuxt -u
// SPA
nuxt -s
如build命令:nuxt build -s
或 nuxt build -u
1、SPA 模式介绍
在普通的Web应用程序中,当用户请求 http://myapp.com/about-us
时,服务器正常返回 about-us.html
如图,在单页应用程序中,任何路由请求将会执行如下操作:
- 下载index.html
- 下载Vue应用程序JavaScript
- 初始化Vue应用
- 初始化
Vue Router
并路由到适当的组件 - 进行API调用以获取要呈现的数据
- 渲染页面
SPA应用初始加载速度可能很慢,一旦加载完成后,速度很快
2、Universal(SSR/SSG)模式
对于 Vue/React 来说,对于它们的 SSR/SSG 框架出现的原因就是主要就是 SEO 和首屏加载速度
(1)SSR(服务端渲染)
如上图,使用Universal
模式,任何路由请求(未启动Vue)将会执行如下操作:
- 浏览器请求服务端页面
- 服务端在服务端渲染请求的页面,如果此时有需求请求的数据,则向 API 服务器请求数据,然后再利用数据渲染成请求的页面,返回给浏览器端
- 浏览器得到新页面,并显示新页面
- 浏览器新页面再请求所需的JavaScript文件、CSS文件等资源
- 最后启动Vue,页面基本变成了常规的SPA,此后路由交互就跟 SPA 一样了,需要渲染数据就直接从 API 服务器获取数据了。
SSR 之后的路由切换 (SPA流程)
![](https://img2020.cnblogs.com/blog/1158910/202111/1158910-20211102145734748-1168610138.png)
如上图,在浏览器中启动Vue之后,路由操作如下:
- 发出了一个JavaScript请求,以仅继承呈现
/about-us
页面组件所需的JavaScript - 进行API调用以获取要呈现的数据
- 渲染页面
(2)SSG(静态网站渲染)
静态网站渲染是在构建时执行的,当发出请求时,直接将html
发送回客户端
(3)SSR 与 SSG 对比
通常来说,静态网站渲染在运行时会更快,因为不需要服务端做处理,但缺点是对数据的任何更改都需要在服务端进行完全重建;
相关文章
- js 解密 16进制转10进制,再取ascii码的对应值
- JS框架_(JQuery.js)网页文字评论弹幕
- JS框架_(JQuery.js)高德地图api
- JS框架_(JQuery.js)动画效果鼠标跟随
- JS框架_(JQuery.js)图片相册掀开切换效果
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
- JS框架_(Laydate.js)简单实现日期日历
- JS - 解决引入 js 文件无效的问题
- baguetteBox.js响应式画廊插件(纯JS)
- JS原生方法实现jQuery的ready()
- JS验证控件jQuery Validate
- js 脏检测
- js-ECMAScript-3:运算符和流程控制
- [Cycle.js] Read effects from the DOM: click events
- js流程控制
- Atitit 研发体系 codelib 代码库的建设 目录 1. 概念与组成2 1.1. Java代码2 1.2. Js代码2 1.3. H5 代码 js+css+htm+txt2 1.4.
- paip.提升效率--数据绑定到table原理和流程Angular js jquery实现
- 华为OD机试 - 区块链文件转储系统(Java & JS & Python)
- 简单JS--点击谁添加背景色demo效果示例(整理)
- 原生js实现随机验证码HTMl-JS
- 【JS高级】js面向对象三大特性之继承_06
- 【JS高级】js之正则相关函数以及正则对象_02
- Node.js学习笔记——path模块