Quiet
  • HOME
  • ARCHIVE
  • CATEGORIES
  • TAGS
  • LINKS
  • ABOUT

李致知

  • HOME
  • ARCHIVE
  • CATEGORIES
  • TAGS
  • LINKS
  • ABOUT
Quiet主题
  • 前端
  • 架构

前端岛屿模型

李致知
前端架构

2023-11-01 02:25:19

文章目录
  1. 一,背景
  2. 二,介绍以及思路
  3. 三,结语
  4. 参考资料

一,背景

今天我看astro的时候了解到了岛屿模型,之前也有所了解,但是今天打算好好了解一下。

还有很多其他的名字:岛屿架构、群岛架构、Islands Architecture、Component Islands、Islands model。知道意思就行,没必要纠结这个。

二,介绍以及思路

岛屿模型是用于SSR的,也就是服务端渲染。

服务端渲染是将我们客户端所进行的解析过程放到服务端,表现在我们能够先看到页面(服务端先返回静态的HTML给客户端),然后返回JS处理逻辑使其功能可用(比如让按钮真正可以进行功能交互)。在这个过程中客户端通过功能交互不断触发前面的这个过程。

而岛屿模型是2019年出现的,通过局部水合(hydration)提高SSR的性能。

局部水合的过程是在服务端渲染的过程中,当服务端渲染到动态化较多(交互较多的地方)的部分时,将其视为一座岛屿,每个岛屿独立加载,来提高性能。

乍一看感觉和微前端比较像,其实两者有相似处,比如都是框架无关和区域独立。

但是微前端不太使用SSR,市面上很少有类似的方案;但是岛屿模型是以SSR为基础。岛屿模型使用HTML实现模块的切分组合,而微前端一般使用CSR所以一般不适用HTML切分组合。

强烈建议看一下第二篇参考文章,讲的很明白

@@@@

通俗地说,岛屿模型用于SSR。岛屿模型通过HTML切分不同的岛屿,而只有有交互的地方才是岛屿。岛屿之间相互独立。

整个过程就是对于静态部分只返回静态HTML,但是对于动态可交互部分默认返回静态部分,但是如果设置为岛屿,服务器会对其进行增强,将交互JS及其依赖打包并传回到客户端加载和水合。

image-20231101163639188

Untitled

三,结语

目前使用岛屿架构的框架比较著名的有:Astro和Fresh

参考资料

Islands Architecture - Keenwon’s Blog

岛屿架构-腾讯云开发者社区-腾讯云 (tencent.com)

Astro 群岛 🚀 Astro 文档

下一篇

对比:权限认证方式

©2023 By 李致知. 主题: Quiet 鲁ICP备2022039519号-1
Quiet主题