岛屿架构
结合预渲染 HTML 与交互式岛屿的选择性水合
岛屿架构 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
岛屿定义
岛屿架构将大部分静态 HTML 与彼此隔离的交互式组件（岛屿）结合起来，并独立地对它们进行水合。
为何使用岛屿
只对需要交互的内容进行水合，从而减少 JS 总量。更快达到 TTI。
Astro 的影响
Astro 推广了这种模式；SvelteKit 可以通过预渲染和选择性水合来采用它。
在 SvelteKit 中实现
预渲染页面并使用 ssr = true；通过延迟加载特定组件来推迟交互功能。
代码拆分
SvelteKit 会按路由拆分代码。若需要进一步拆分，请在页面中使用动态 import()。
静态与动态结合
营销页面可以是静态的；“订阅”表单可以是动态完成水合的岛屿。
性能指标
减小 JS 负载，加快最大内容绘制，并改善核心网页指标。
权衡
架构复杂度会增加。混合静态与动态内容需要谨慎规划。
边缘 SSR
将岛屿架构与边缘 SSR 结合，在全球范围内实现快速首次绘制，同时只需极少的 JS。
框架
Astro 专为岛屿架构打造；Qwik 的可恢复性将这一理念进一步发展。
使用场景
内容密集且仅偶尔需要交互的网站：博客、文档和电子商务网站。
快速检查
岛屿架构的特征是什么？
回顾
岛屿架构将静态 HTML 与按需完成水合的交互式组件结合起来，从而只需极少的 JS 并实现快速 TTI。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 41
- 课程
- 163
常见问题解答
「岛屿架构」课时是免费的吗？
是的 — 「岛屿架构」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「岛屿架构」这节课中我会学到什么？
结合预渲染 HTML 与交互式岛屿的选择性水合 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「岛屿架构」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。