Next.js App Router 실전 베스트 프랙티스 7가지

App Router는 단순한 새 폴더 구조가 아닙니다. 컴포넌트가 기본적으로 서버에서 실행되고, 클라이언트 번들은 선택적으로 포함하는 다른 모델입니다. 이를 받아들이면 앱이 빠르고 단순해지고, 거스르면 하이드레이션 오류와 비대한 번들을 얻습니다. 프로젝트를 건강하게 유지하는 7가지 습관입니다.

1. "use client"는 말단에만

상호작용은 작은 컴포넌트(버튼, 폼)로 내리고, 페이지와 레이아웃은 서버 컴포넌트로 유지하세요. 브라우저로 보내는 자바스크립트가 줄어듭니다.

2. 렌더링하는 곳에서 데이터를 가져오세요

서버 컴포넌트는 async로 직접 페칭할 수 있습니다. useEffect + 로딩 상태 춤을 버리고, 데이터가 필요한 컴포넌트에서 가져오세요.

3. Suspense로 스트리밍하세요

느린 영역을 <Suspense>로 감싸 빠른 셸을 즉시 렌더링하고 느린 데이터를 채우세요. 사용자는 더 빨리 콘텐츠를 보고 크롤러는 빠른 첫 페인트를 얻습니다.

4. SEO에는 generateMetadata

페이지별 제목, 설명, 정규 URL, OpenGraph 태그는 generateMetadata에 두세요 — 클라이언트에서 끼워 넣지 말고 서버에서 렌더링되어 크롤링되게 하세요.

5. 캐싱을 의도적으로

각 라우트가 정적인지 동적인지 파악하세요. 데이터가 항상 최신이어야 하면 export const dynamic을 명시해, 오래된 페이지에 놀라지 않게 하세요.

6. 로딩/에러 UI를 같이 두세요

라우트 옆에 loading.tsx와 error.tsx를 추가하세요. 추가 작업 없이 스켈레톤과 우아한 실패 처리를 얻습니다.

7. 콘텐츠 페이지에 구조화 데이터를

기사와 목록에는 JSON-LD를 출력해 검색 엔진이 리치 결과를 렌더링하게 하세요 — 작은 파일이 노출로 돌아옵니다.

App Router는 서버 우선 사고를 보상합니다. 사용자가 실제로 상호작용하는 곳에만 자바스크립트를 보내세요.