nuxt3使用记录三:SSG渲染其实是混合渲染

发布于:2024-04-17 ⋅ 阅读:(28) ⋅ 点赞:(0)

从上一篇成功构建出静态的html文件后,我最近又折腾了一下,因为对SSG的理解还是太浅了。

一直很好奇为什么SSG构建完会有这么多.js文件,昨晚找到点思路,记录一下

现象

运行构建后的结果,F12调试时,发现怎么除了第一次请求时有请求构建出来的.html文件,后面再也没有看到有请求.html文件的

请求的都是.js文件。但是页面看起来都是正常的

然后随便找一个路由直接刷新的话,他就是有请求对应的.html文件,但也仅有这一次是请求.html文件的,再点其他链接跳转路由都是请求的.js文件。当然,界面都是能正常显示的

我的理解

关于.html文件

因为构建的.html文件是非常臃肿的,比如说页面是使用了布局的,上方和左边都有固定的导航栏,只有中间一块区域是通过路由切换的。

而此时看看.html文件,你会发现每个页面的.html文件,都是完整的包含那些导航栏,而不是纯粹的当前页面。

为什么不是每次路由都是请求构建好的.html文件

我猜正是因为上述原因,nuxt会构建一堆.js文件出来,避免每次都要请求.html文件,因为你对比就会发现,一个html文件差不多40K,而请求一个.js文件才2K,却能达到一样的效果。你会怎么选?

采用这种方式,每次只需要请求当前路由对应的.js文件(当然你从文件名是看不出来的,都是一堆自动生成的字符),固定的导航栏不需要重复请求。

但是首次进入一个页面或手动刷新整个页面时,就会去请求.html文件,因为这时候包括导航栏在内的都要刷新重新请求,这时候就相当于直接向服务器请求整个.html文件了。

并且,这样子才能达到提高SEO的效果,因为每个路由都有对应的.html文件,静态的页面搜索引擎才能更好的检索。毕竟搜索引擎爬取页面时是直接访问路由的,他需要的是完整的.html文件,相当于每次都是刷新页面了

而nuxt这种构建机制,在正常访问页面又能保留传统的客户端渲染的机制,大大减少了请求的文件大小,保留客户端渲染的优点,这个之前倒是没想到。官方文档也没细讲。

结论

  1. 构建的html是很臃肿的
  2. 仅有首次打开进入一个页面(手动刷新页面也算)时,才会请求.html文件
  3. SSG构建一堆.js文件,这些.js文件也能在客户端渲染成最终的页面效果,避免每次都要请要请求整个页面,导致每次都要刷新不必要刷新的固定区域。这里就像传统的那种客户端渲染效果了

所以我认为SSG也是混合渲染,它既会渲染纯静态页面,也会构建一堆.js文件来实现客户端渲染,既能提高SEO,又能保留传统渲染的优点。


网站公告

今日签到

点亮在社区的每一天
去签到