#青训营笔记创作活动#
1月7日 打卡day26
今日学习
SSR/SSG
首先框架侧会在服务端生成完整的HTML内容,并且同时注入客户端所需要的 SPA 脚本。这样浏览器会拿到完整的HTML内容,然后执行客户端的脚本事件的绑定(hydrate),后续路由的跳转由 JS 来掌管。把 MPA 和 SPA 结合的问题在于这类方案仍然会下载全量的客户端 JS 及执行全量的组件 Hydrate过程,造成页面的首屏 TTI 劣化。
Islands
当一个页面中只有部分的组件交互,对于这些可交互的组件,可以执行 hydration过程,因为组件之间是互相独立的。而对于静态组件,即不可交互的组件,可以让其不参与hydration过程,直接复用服务端下发的 HTML 内容。可交互的组件就犹如整个页面中的孤岛(Island),因此这种模式叫做 Islands架构。
在Astro中,默认所有的组件都是静态组件,不会在浏览器添加任何的JS代码。但有时我们需要在组件中绑定一些交互事件,这时就需要激活孤岛组件,在使用组件时加上client:load指令即可。Astro除了支持本身Astro语法之外,也支持Vue、React等,可以通过插件的方式来导入。在构建的时候,Astro只会打包并注入Islands组件的代码,并且在浏览器渲染,分别调用不同框架(Vue、React)的渲染函数完成各个Islands组件的hydrate过程。
Fresh是一个基于Preact和Deno的全栈框架,同时也主打Islands架构。它约定项目中的islands目录专门存放island组件。值得注意的是客户端 hydrate方法的实现,传统的SSR一般都是直接对根节点调用hydrate,而在 Islands架构中,Fresh对每个Island进行独立渲染。
VitePress内部使用的是Shell架构,采用的是SSG+SPA模式,会在hydrate的过程中把正文的静态部分排除,利用Vue的编译时优化以及内部定制的Hydrate方案足以解决传统SSG的全量hydration问题,采用Islands架构意义并不大。其他的代表性编译时框架如Solid、Svelte 很难实现Vue的Shell架构(没法标记静态节点),因此Shell方案可以理解为在Vue框架下的一个特殊优化。
展开
评论