1、Nuxt其一目的是为了解决单页面应用的SEO问题,相比于我们平常的SPA页面。在搜索引擎中由于无法从网页中被抓取内容信息(SPA页面的信息都是被打包到JS文件中,动态加载到页面中),从而无法被用户所搜索到。
1、第一步:客户端先向服务端请求数据
2、第二步:服务端再从API服务器获取数据
3、第三步:服务端返回完整HTML页面给客户端
4、第四步:客户端页面渲染(使用SPA)
5、第五步:此后客户端就直接请求API服务器获取数据,然后使用SPA渲染页面
通过命令行创建项目时,必须在生成Universal模式或SPA模式应用程序之间进行选择。
模式切换:
//Universalnuxt-u//SPAnuxt-s如build命令:nuxtbuild-s或nuxtbuild-u
如图,在单页应用程序中,任何路由请求将会执行如下操作:
SPA应用初始加载速度可能很慢,一旦加载完成后,速度很快
对于Vue/React来说,对于它们的SSR/SSG框架出现的原因就是主要就是SEO和首屏加载速度
(1)SSR(服务端渲染)
如上图,使用Universal模式,任何路由请求(未启动Vue)将会执行如下操作:
SSR之后的路由切换(SPA流程)
如上图,在浏览器中启动Vue之后,路由操作如下:
(2)SSG(静态网站渲染)
静态网站渲染是在构建时执行的,当发出请求时,直接将html发送回客户端
(3)SSR与SSG对比
通常来说,静态网站渲染在运行时会更快,因为不需要服务端做处理,但缺点是对数据的任何更改都需要在服务端进行完全重建;
THE END