Astro vs Next.js: 블로그를 마이그레이션하며 느낀 차이

---
// 서버에서만 실행되는 영역
interface Props {
  title: string;
  posts: Array<{ id: number; title: string }>;
}
 
const { title, posts } = Astro.props;
 
// DB 접근, API 호출 등 서버 사이드 작업
const response = await fetch('https://api.example.com/data');
const data = await response.json();
---
 
<!-- HTML 템플릿 -->
<h1>{title}</h1>
<ul>
  {posts.map(post => <li>{post.title}</li>)}
</ul>
 
<!-- children 대신 slot -->
<slot />
 
<style>
  /* 이 컴포넌트에만 적용되는 Scoped 스타일 */
  h1 { color: var(--foreground); }
</style>
 
<script>
  // 클라이언트에서 실행되는 JS (필요할 때만)
  console.log('loaded');
</script>

// Server Component (기본값)
export default async function BlogList({ title }: { title: string }) {
  const data = await fetch('https://api.example.com/data')
    .then(r => r.json());
 
  return (
    <div>
      <h1>{title}</h1>
      <ul>
        {data.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}

'use client'; // 이 선언으로 Client Component가 됨
 
import { useState } from 'react';
 
export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

---
import Header from './Header.astro';              // 정적 HTML, JS 0
import ImageCarousel from './Carousel.tsx';        // React
import Reviews from './Reviews.vue';               // Vue도 가능!
---
 
<!-- JS 없는 정적 HTML -->
<Header />
 
<!-- 페이지 로드 시 즉시 hydrate -->
<ImageCarousel client:load images={images} />
 
<!-- 뷰포트에 보일 때 hydrate -->
<Reviews client:visible productId={id} />
 
<!-- 브라우저가 idle 상태일 때 hydrate -->
<RelatedProducts client:idle />

import { Suspense } from 'react';
 
export default function ProductPage() {
  return (
    <div>
      {/* Server Component — hydration 불필요 */}
      <Header />
      <ProductInfo />
 
      {/* 준비되면 스트리밍 */}
      <Suspense fallback={<CarouselSkeleton />}>
        <ImageCarousel />
      </Suspense>
 
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews />
      </Suspense>
    </div>
  );
}

src/pages/
├── index.astro           → /
├── about.astro           → /about
├── posts/
│   └── [slug].astro      → /posts/:slug
└── page/
    └── [page].astro      → /page/:page

---
export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post },  // 데이터를 props로 직접 전달
  }));
}
 
const { post } = Astro.props;
---
 
<article>
  <h1>{post.data.title}</h1>
</article>

app/
├── page.tsx              → /
├── about/
│   └── page.tsx          → /about
├── posts/
│   ├── [slug]/
│   │   └── page.tsx      → /posts/:slug
│   └── layout.tsx        → 포스트 전용 레이아웃

// 정적 경로 생성 — params만 반환
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(post => ({ slug: post.slug }));
}
 
// params가 Promise (Next.js 15+)
export default async function Page({
  params
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params;
  const post = await getPost(slug); // 데이터를 다시 가져옴
  return <article><h1>{post.title}</h1></article>;
}

---
import BaseLayout from '@/layouts/BaseLayout.astro';
---
 
<BaseLayout title="About">
  <h1>About Me</h1>
</BaseLayout>

---
import { getCollection } from 'astro:content';
 
// Content Collections — 타입 안전한 로컬 콘텐츠
const posts = await getCollection('blog', ({ data }) =>
  data.published !== false
);
 
// 외부 API도 그냥 await
const response = await fetch('https://api.example.com/posts');
const data = await response.json();
 
// 병렬 페칭
const [users, comments] = await Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/comments').then(r => r.json()),
]);
---

export default async function Page() {
  // 기본: 캐시됨
  const posts = await fetch('https://api.example.com/posts')
    .then(r => r.json());
 
  // 캐시 안 함 (항상 최신)
  const live = await fetch('/api/live', { cache: 'no-store' });
 
  // ISR: 10초마다 재검증
  const data = await fetch('/api/data', {
    next: { revalidate: 10 }
  });
}

import { cacheLife } from 'next/cache';
 
async function CachedProducts() {
  'use cache';
  cacheLife('hours');
 
  const products = await db.query('SELECT * FROM products');
  return <ProductList products={products} />;
}

// useDarkMode.ts — DOM을 관찰해서 다크모드 상태를 동기화
useEffect(() => {
  const observer = new MutationObserver(() =>
    setDark(isDark(document.documentElement)),
  );
  observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class'],
  });
  return () => observer.disconnect();
}, []);