Next.js App Router 핵심 개념

Server Component vs Client Component

App Router의 핵심 개념입니다. 모든 컴포넌트는 기본적으로 Server Component입니다.

Client Component는 파일 최상단에 'use client'를 선언합니다.

데이터 페칭

Server Component에서 직접 async/await를 사용합니다.

export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  return <div>{json.title}</div>;
}

generateStaticParams

동적 라우트의 모든 경우를 빌드 타임에 정적 생성합니다.

export async function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

레이아웃 중첩

layout.tsx는 하위 라우트 전체에 적용됩니다. 상태를 유지한 채 페이지만 교체됩니다.

app/
├── layout.tsx      ← 전체 공통 레이아웃
├── blog/
│   ├── layout.tsx  ← /blog/* 에만 적용
│   └── page.tsx