선택적 Hydration 파헤치기 — client:* 지시어는 내부에서 어떻게 동작하는가

async hydrate() {
  // 이미 hydrate됐으면 건너뜀 (중복 방지)
  if (this.hasAttribute('ssr')) return;
 
  const componentUrl = this.getAttribute('component-url');
  const rendererUrl  = this.getAttribute('renderer-url');
 
  // JS 번들을 동적으로 로드 — 캐시되면 즉시 resolve
  const [{ default: Component }, { default: renderer }] = await Promise.all([
    import(componentUrl),   // 예: /_astro/SearchBar.js
    import(rendererUrl),    // 예: /_astro/client.react.js
  ]);
 
  // HTML에 박힌 props를 꺼냄
  const props = JSON.parse(this.getAttribute('props') ?? '{}');
  const slots = JSON.parse(this.getAttribute('slots') ?? '{}');
 
  // 실제 프레임워크의 hydrate 호출
  await renderer.hydrate(Component, props, slots, this);
 
  // 완료 마킹 — 재실행 방지
  this.removeAttribute('ssr');
}

// packages/renderer-react/client.js
export async function hydrate(Component, props, slots, el) {
  const { hydrateRoot, createElement } = await import("react-dom/client");
 
  const root = hydrateRoot(el, createElement(Component, props));
 
  // island가 DOM에서 제거될 때 React root도 정리
  el._root = root;
}

async connectedCallback() {
  const strategy = this.getAttribute('client');
 
  if (strategy === 'load') {
    await this.hydrate(); // 아무 조건 없이 바로
    return;
  }
  // ...
}

island A (8kb)   ──fetch──▶ ~80ms  → hydrate
island B (42kb)  ──fetch──────────▶ ~300ms → hydrate
island C (2kb)   ──fetch─▶ ~40ms → hydrate
 
완료 순서: C → A → B  (서로 무관)

if (strategy === "idle") {
  if ("requestIdleCallback" in window) {
    requestIdleCallback(
      () => this.hydrate(),
      { timeout: 200 }, // 최대 200ms 안에는 강제 실행
    );
  } else {
    // Safari 등 미지원 브라우저 폴백
    setTimeout(() => this.hydrate(), 200);
  }
  return;
}

requestIdleCallback((deadline) => {
  console.log(deadline.timeRemaining()); // 이번 idle 구간에 남은 시간 (ms)
  console.log(deadline.didTimeout); // timeout으로 강제 실행됐는지 여부
});

사용자가 페이지 로드 직후 스크롤을 계속 내린다면?
 
timeout 없음:
  requestIdleCallback 등록
  → 스크롤 이벤트 처리 (idle time 없음)
  → 스크롤 이벤트 처리 (idle time 없음)
  → ... 몇 초가 지나도 hydrate 안 됨 ← 문제
 
timeout: 200 설정:
  requestIdleCallback 등록
  → 스크롤 이벤트 처리
  → 200ms 경과 → deadline.didTimeout = true → 강제 실행

if (strategy === "visible") {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      this.hydrate();
      observer.unobserve(this); // 1회만 실행, 이후 감시 중단
    }
  });
  observer.observe(this);
  return;
}

if (strategy === "media") {
  const query = this.getAttribute("client-media");
  const mq = window.matchMedia(query);
 
  const handler = () => {
    if (mq.matches) {
      this.hydrate();
      mq.removeEventListener("change", handler); // 1회만
    }
  };
 
  mq.addEventListener("change", handler);
 
  // 이미 조건이 충족된 상태라면 즉시 실행
  if (mq.matches) {
    this.hydrate();
  }
  return;
}

<!-- 768px 이상일 때만 hydrate -->
<DesktopMenu client:media="(min-width: 768px)" />
 
<!-- 다크모드일 때만 hydrate -->
<DarkModeWidget client:media="(prefers-color-scheme: dark)" />

// client:only는 서버에서 아예 실행되지 않음
// HTML에 placeholder HTML이 없음 — 완전히 빈 상태에서 시작
if (strategy === "only") {
  await this.hydrate(); // client:load와 동일하게 즉시 실행
  return;
}

<!-- window.localStorage를 쓰는 컴포넌트 — SSR하면 에러 -->
<ThemeToggle client:only="react" />

<astro-island client="load" await-children="">
  <div>
    <astro-island client="load" component-url="/Child.js"> ... </astro-island>
  </div>
</astro-island>

async hydrate() {
  if (this.hasAttribute('await-children')) {
    // 내부의 모든 astro-island가 완료될 때까지 대기
    const innerIslands = this.querySelectorAll('astro-island');
    await Promise.all(
      [...innerIslands].map(island => island.hydrated)
      // island.hydrated는 각 island가 hydrate 완료 시 resolve하는 Promise
    );
  }
  await this.doHydrate();
}

island A (SearchBar)  ──┐
                         ├── 서로 React 상태 공유 불가
island B (CartIcon)   ──┘

// store.js — 프레임워크 무관
import { atom } from "nanostores";
export const cartCount = atom(0);
 
// SearchBar.tsx (island A)
import { cartCount } from "./store";
cartCount.set(cartCount.get() + 1);
 
// CartIcon.tsx (island B) — 완전히 다른 island지만 같은 store 구독
import { useStore } from "@nanostores/react";
import { cartCount } from "./store";
const count = useStore(cartCount); // 반응형으로 업데이트