CDN 캐시는 그대로, 개인화 UI만 서버에서 — Astro 5 Server Islands와 Content Layer가 콘텐츠 사이트 아키텍처를 바꾸는 방식

---
// src/components/PersonalizedBanner.astro
const { userId } = Astro.props;
const user = await fetchUser(userId);   // 요청 시점에 실행
const promo = await fetchPromo(user.region);
---
<div class="banner">
  <p>안녕하세요, {user.name}님 👋</p>
  <p>{promo.message}</p>
</div>

---
// src/pages/landing.astro
import PersonalizedBanner from '../components/PersonalizedBanner.astro';
import HeroSection from '../components/HeroSection.astro';
import PricingTable from '../components/PricingTable.astro';
 
const userId = Astro.cookies.get('userId')?.value;
---
<main>
  <!-- 아래 두 컴포넌트는 빌드 타임에 정적 HTML로 생성됨 -->
  <HeroSection />
  <PricingTable />
 
  <!-- 이 아일랜드만 요청 시점에 서버에서 렌더링됨 -->
  <PersonalizedBanner server:defer userId={userId}>
    <div slot="fallback" class="banner-skeleton">로딩 중…</div>
  </PersonalizedBanner>
</main>

// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { storyblokLoader } from '@storyblok/astro';
 
const blog = defineCollection({
  loader: storyblokLoader({
    accessToken: import.meta.env.STORYBLOK_TOKEN,
    version: 'published',
  }),
  schema: z.object({
    title: z.string(),
    publishedAt: z.coerce.date(),
    slug: z.string(),
    excerpt: z.string().optional(),
    coverImage: z.string().url().optional(),
  }),
});
 
export const collections = { blog };

---
// src/pages/blog/index.astro
import { getCollection } from 'astro:content';
 
const posts = await getCollection('blog');
const sorted = posts.sort(
  (a, b) => b.data.publishedAt.getTime() - a.data.publishedAt.getTime()
);
---
<ul>
  {sorted.map(post => (
    <li>
      <a href={`/blog/${post.data.slug}`}>{post.data.title}</a>
      <time>{post.data.publishedAt.toLocaleDateString('ko-KR')}</time>
    </li>
  ))}
</ul>

---
// src/components/RegionalPromo.astro
import { getEntry } from 'astro:content';
 
const { region, isLoggedIn } = Astro.props;
 
const promo = await getEntry('promotions', region);
 
const message = isLoggedIn
  ? promo?.data.memberMessage
  : promo?.data.guestMessage;
---
{message && (
  <div class={`promo promo--${region}`}>
    <p>{message}</p>
    {isLoggedIn && <a href="/my/coupons">쿠폰 확인하기 →</a>}
  </div>
)}

---
// src/pages/index.astro
import RegionalPromo from '../components/RegionalPromo.astro';
 
const region = Astro.cookies.get('region')?.value ?? 'kr';
const isLoggedIn = Boolean(Astro.cookies.get('session')?.value);
---
<main>
  <HeroSection />
  <FeatureGrid />
  <PricingTable />
 
  <RegionalPromo
    server:defer
    region={region}
    isLoggedIn={isLoggedIn}
  >
    <div slot="fallback" class="promo-skeleton" aria-hidden="true" />
  </RegionalPromo>
</main>

// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { storyblokLoader } from '@storyblok/astro';
 
const articles = defineCollection({
  loader: storyblokLoader({ accessToken: import.meta.env.STORYBLOK_TOKEN }),
  schema: z.object({
    title: z.string(),
    slug: z.string(),
    body: z.string(),
    publishedAt: z.coerce.date(),
    author: z.string(),
  }),
});
 
export const collections = { articles };

---
// src/components/SocialStats.astro
const { articleSlug } = Astro.props;
 
let stats = { comments: 0, likes: 0, views: 0 };
 
try {
  const res = await fetch(
    `${import.meta.env.API_BASE}/stats/${articleSlug}`,
    { headers: { Authorization: `Bearer ${import.meta.env.API_TOKEN}` } }
  );
  if (res.ok) {
    stats = await res.json();
  }
} catch {
  // 네트워크 오류 시 기본값(0)으로 렌더링
}
---
<div class="social-stats">
  <span>💬 댓글 {stats.comments}</span>
  <span>❤️ 좋아요 {stats.likes}</span>
  <span>👁️ 조회 {stats.views.toLocaleString('ko-KR')}</span>
</div>

---
// src/pages/articles/[slug].astro
import { getEntry } from 'astro:content';
import SocialStats from '../../components/SocialStats.astro';
 
const { slug } = Astro.params;
const article = await getEntry('articles', slug!);
if (!article) return Astro.redirect('/404');
---
<article>
  <h1>{article.data.title}</h1>
  <p>by {article.data.author} · {article.data.publishedAt.toLocaleDateString('ko-KR')}</p>
 
  <!--
    set:html은 신뢰할 수 있는 소스의 HTML에만 사용하세요.
    외부 사용자 입력이 body에 포함될 수 있다면 서버 사이드 sanitization이 필요합니다.
  -->
  <div set:html={article.data.body} />
 
  <SocialStats server:defer articleSlug={article.data.slug}>
    <span slot="fallback" class="stats-skeleton" aria-hidden="true" />
  </SocialStats>
</article>

---
// src/pages/products/[id].astro
import { getEntry } from 'astro:content';
import StockStatus from '../../components/StockStatus.astro';
import CartButton from '../../components/CartButton.astro';
 
const product = await getEntry('products', Astro.params.id!);
if (!product) return Astro.redirect('/404');
 
const userId = Astro.cookies.get('userId')?.value;
---
<section>
  <!-- 정적 영역 — CDN 캐시 -->
  <img src={product.data.imageUrl} alt={product.data.name} />
  <h1>{product.data.name}</h1>
  <p>{product.data.description}</p>
  <SpecTable specs={product.data.specs} />
 
  <!-- 두 아일랜드는 병렬로, 독립적으로 로드됨 -->
  <StockStatus server:defer productId={product.id}>
    <span slot="fallback">재고 확인 중…</span>
  </StockStatus>
 
  <CartButton server:defer productId={product.id} userId={userId}>
    <button slot="fallback" disabled>로딩 중…</button>
  </CartButton>
</section>

// astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';  // 또는 netlify, node
 
export default defineConfig({
  output: 'static',     // 기본값 — 정적 페이지
  adapter: vercel(),    // Server Islands 지원에 필수
  integrations: [],
});

<!-- ❌ 이렇게 하면 동작하지 않음 -->
<ReactCart server:defer userId={userId} />

---
// src/components/CartIsland.astro — .astro 래퍼
import ReactCart from './ReactCart.tsx';
const { userId } = Astro.props;
const cartData = await fetchCart(userId);
---
<ReactCart client:load initialData={cartData} />

<!-- ✅ 페이지에서는 .astro 래퍼에 server:defer 적용 -->
<CartIsland server:defer userId={userId}>
  <span slot="fallback">장바구니 로딩 중…</span>
</CartIsland>

<!-- ❌ 객체 전체 전달 — URL 길이 초과 위험 -->
<ProductStatus server:defer product={fullProductObject} />
 
<!-- ✅ ID만 전달, 아일랜드 내부에서 조회 -->
<ProductStatus server:defer productId={product.id} />