Ch 01. 이 책에서 배운 것
한 걸음 물러서서 전체를 바라봅니다. 무엇을 배웠는지 정리하면, 앞으로 무엇을 더 배워야 하는지도 보입니다.
PART별 핵심 개념 정리
| PART | 주제 | 핵심 개념 |
|---|---|---|
| PART 01 | 개발 환경 준비 | Next.js 설치, 프로젝트 구조, App Router 기본 |
| PART 02 | 렌더링 방식 | SSR, CSR, SSG, ISR의 차이와 선택 기준 |
| PART 03 | 라우팅과 레이아웃 | 파일 기반 라우팅, 중첩 레이아웃, 동적 라우트 |
| PART 04 | Server Components | 서버/클라이언트 경계, "use client", 직렬화 |
| PART 05 | 데이터 페칭 | fetch, Server Actions, 캐싱과 재검증 |
| PART 06 | 인증과 미들웨어 | NextAuth.js, JWT, middleware.ts |
| PART 07 | 실전 프로젝트 | 풀스택 블로그 구현 |
| PART 08 | 배포 | Vercel, Docker, 성능 측정, 장애 대응 |
SSR/SSG/ISR/CSR 선택 기준 요약
가장 자주 받는 질문 중 하나입니다. "이 페이지는 어떤 방식으로 렌더링해야 하나요?"
Server Components 핵심 원칙
-
기본은 서버 컴포넌트: App Router에서 모든 컴포넌트는 기본적으로 Server Component입니다. 클라이언트 기능이 필요할 때만
"use client"를 추가합니다. -
서버에서만 할 수 있는 것: 데이터베이스 직접 조회, 파일 시스템 접근, 비밀 키 사용. 이런 작업은 Server Component에서 합니다.
-
클라이언트에서만 할 수 있는 것:
useState,useEffect, 브라우저 API, 이벤트 리스너. 이런 기능이 필요하면"use client"를 선언합니다. -
경계를 최대한 아래로:
"use client"경계는 가능한 컴포넌트 트리의 하단에 위치시킵니다. 큰 부모를 클라이언트 컴포넌트로 만들면 그 자식들도 모두 클라이언트 번들에 포함됩니다. -
직렬화 규칙: Server Component에서 Client Component로 props를 전달할 때, 직렬화 가능한 값만 전달합니다.
Date는.toISOString()으로, 함수는 Server Actions로 전달합니다.
데이터 페칭 전략 요약
| 상황 | 방법 |
|---|---|
| 서버 컴포넌트에서 DB 조회 | async 컴포넌트 + Prisma |
| 외부 API 데이터 | fetch + 캐싱 옵션 |
| 폼 제출, 데이터 변경 | Server Actions |
| 캐시 갱신 | revalidateTag, revalidatePath |
| 클라이언트에서 실시간 데이터 | SWR, React Query |
| 낙관적 UI 업데이트 | useOptimistic |
인증 아키텍처 정리
중요한 점: 미들웨어만으로는 부족합니다. 데이터를 변경하는 Server Action에서도 반드시 권한을 확인합니다. 클라이언트는 항상 조작될 수 있습니다.
다음 챕터에서는 앞으로 어떤 것을 더 배우면 좋을지 안내합니다.