React Academy · 课时

岛屿架构模式

Q: 「岛屿架构模式」这节课中我会学到什么？

传输以静态 HTML 为主的内容，仅水合可交互的小部件，以优化可交互时间。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

传输以静态 HTML 为主的内容，仅水合可交互的小部件，以优化可交互时间。

岛屿架构模式 是 CoddyKit 上的免费 React Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

什么是岛屿架构

岛屿架构主要发送静态 HTML，并包含一些小型、可独立完成水合的交互式区域（岛屿）。页面的大部分内容都不需要 JS；只有需要交互的控件才会成为 React 岛屿。

它解决的问题

传统 SSR 会为整个页面执行水合，即使页面中有 90% 是静态内容（页眉、文本、图像）。岛屿只对交互部分执行水合，从而大幅减少发送到浏览器的 JavaScript。

核心概念

您可以把页面想象成一片静态 HTML 海洋，其中漂浮着一些交互式岛屿。每个岛屿都可以独立完成水合，并且在需要时使用不同的框架。

Astro 作为岛屿框架

Astro 普及了岛屿架构。组件默认不包含 JS。添加 client:* 指令即可选择启用水合。

---
import Header from './Header.astro';      // static — 0 JS
import SearchBar from './SearchBar.jsx';  // island — hydrated
import Footer from './Footer.astro';      // static — 0 JS
---
<Header />
<SearchBar client:load />   <!-- hydrate immediately -->
<SearchBar client:idle />   <!-- hydrate when browser is idle -->
<SearchBar client:visible /> <!-- hydrate when scrolled into view -->
<Footer />

水合指令

岛屿框架提供了细粒度的水合时机控制：client:load（立即执行）、client:idle（使用 requestIdleCallback）、client:visible（使用 IntersectionObserver）、client:media（使用 CSS 媒体查询）。

在 Next.js 中实现岛屿

Next.js 应用路由器通过拆分服务端组件和客户端组件来近似实现岛屿架构。服务端组件 = 静态内容；客户端组件 = 岛屿。

// Most of the page is a Server Component (no JS sent)
export default async function ProductPage() {
  const product = await getProduct();
  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* Only the interactive button is a Client Component island */}
      <AddToCartButton product={product} />
    </article>
  );
}

使用 React 的延迟加载手动实现岛屿

如果没有专用框架，可以只在页面加载完成后延迟加载交互式组件，以实现岛屿架构。

const HeavyWidget = lazy(() => import('./HeavyWidget'));

function Page() {
  const [show, setShow] = useState(false);
  const containerRef = useRef(null);

  useEffect(() => {
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) setShow(true);
    });
    obs.observe(containerRef.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div ref={containerRef}>
      {show && <Suspense fallback={null}><HeavyWidget /></Suspense>}
    </div>
  );
}

权衡

优点：JS 最少、TTI 更快、静态内容可以得到积极缓存。代价：岛屿之间不易共享状态（它们处于独立的 JS 上下文中），而且架构比标准 SPA 更复杂。

在岛屿之间共享状态

使用浏览器原生机制（自定义事件、URL、localStorage），或使用一个小型的共享存储单例，在相互独立的岛屿之间进行通信。

// Shared nano-store (nanostores library works well with Astro):
import { atom } from 'nanostores';
export const cartCount = atom(0);

// Island A:
cartCount.set(cartCount.get() + 1);
// Island B subscribes:
cartCount.subscribe(count => setDisplay(count));

何时使用岛屿架构

最适合：内容密集型网站（博客、电子商务网站、营销网站），其中大多数内容是静态的，只有少数组件需要交互功能（搜索、购物车、表单）。

岛屿架构、SSR 与 SPA

SPA：包含所有 JS，并为所有内容执行水合。SSR：服务端渲染所有内容，并为所有内容执行水合。岛屿架构：服务端渲染所有内容，只为交互式控件执行水合。对于内容型网站，岛屿架构在性能方面更具优势。

快速检查

岛屿架构模式带来的主要性能优势是什么？

回顾

岛屿架构让大部分 HTML 保持静态（零 JS），只为交互式控件执行水合。您可以使用 Astro 这一专用岛屿框架，也可以使用 Next.js 的服务端组件和客户端组件来近似实现。对于非关键岛屿，可以使用 client:visible/IntersectionObserver 进行延迟水合。

常见问题解答

「岛屿架构模式」课时是免费的吗？

是的 — 「岛屿架构模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「岛屿架构模式」这节课中我会学到什么？

传输以静态 HTML 为主的内容，仅水合可交互的小部件，以优化可交互时间。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「岛屿架构模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy