Next.js App Router

파일 라우팅과 서버 렌더링이 기본 축입니다

app 디렉터리의 layout, page, loading, route 파일이 라우팅을 만들고 Server Components, data fetching, caching 정책이 렌더링 방식을 정합니다.

01

App Router

app/blog/[slug]/page.tsx처럼 폴더와 파일로 중첩 라우트를 구성합니다.

02

Server Components

기본 컴포넌트는 서버에서 실행하고, 필요한 곳만 "use client"로 나눕니다.

03

Data Fetching

Server Component는 async/await, fetch, ORM 호출을 서버 렌더링 경계 안에서 실행합니다.

04

Caching

fetch cache, revalidatePath, revalidateTag, use cache로 신선도를 조절합니다.

렌더링 전략

정적 페이지, 동적 요청, streaming UI를 loading.tsx와 Suspense로 나눕니다.

캐싱 정책

상품 목록은 캐시하고 장바구니나 세션 데이터는 요청 시점에 읽습니다.

컴포넌트 경계

폼, 모달, 상태 훅이 필요한 작은 영역만 Client Component로 둡니다.