Islands Architecture

// Astro에서 Islands Architecture 사용 예제
// src/pages/index.astro

---
// 서버에서 실행되는 컴포넌트 스크립트
import Layout from '../layouts/Layout.astro';
import Header from '../components/Header.astro';  // 정적 컴포넌트
import Footer from '../components/Footer.astro';  // 정적 컴포넌트

// React/Vue/Svelte 등 인터랙티브 컴포넌트
import SearchBar from '../components/SearchBar.jsx';
import Newsletter from '../components/Newsletter.vue';
import Comments from '../components/Comments.svelte';

const posts = await fetch('/api/posts').then(r => r.json());
---

<Layout title="블로그">
  <!-- 정적 HTML - JavaScript 없음 -->
  <Header />

  <main>
    <!-- 아일랜드 1: 페이지 로드 시 즉시 하이드레이션 -->
    <SearchBar client:load placeholder="검색어를 입력하세요" />

    <!-- 정적 콘텐츠 -->
    <section class="posts">
      {posts.map((post) => (
        <article>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </section>

    <!-- 아일랜드 2: 브라우저가 idle 상태일 때 하이드레이션 -->
    <Newsletter client:idle />

    <!-- 아일랜드 3: 뷰포트에 보일 때 하이드레이션 (Lazy) -->
    <Comments client:visible postId={posts[0].id} />
  </main>

  <!-- 정적 HTML - JavaScript 없음 -->
  <Footer />
</Layout>

// 클라이언트 디렉티브 옵션:
// client:load     - 페이지 로드 시 즉시 (높은 우선순위)
// client:idle     - 브라우저 idle 시 (requestIdleCallback)
// client:visible  - 뷰포트에 보일 때 (IntersectionObserver)
// client:media    - 미디어 쿼리 충족 시
// client:only     - 클라이언트에서만 렌더링 (SSR 스킵)