Next.js는 React 앱에 서버 렌더링과 라우팅, 데이터 캐싱을 기본으로 제공하는 프레임워크다. React만 쓰면 빈 HTML을 내려보내고 브라우저가 화면을 그리지만, Next.js는 서버에서 HTML을 만들어 첫 화면과 검색 노출을 개선한다. Next.js 13부터 도입된 App Router는 서버 컴포넌트를 기본으로 삼아, 데이터를 서버에서 가져오고 상호작용이 필요한 부분만 클라이언트로 보낸다. 이 주제의 노트는 "왜 쓰나 → App Router의 동작 → 컴포넌트 조합 규칙" 순서로 읽으면 자연스럽다.
노트
- Next.js를 쓰는 이유: CSR의 한계, SSR·SSG로 얻는 SEO, 파일 기반 라우팅,
proxy.ts,fetch캐싱·재검증과 Next.js 16의'use cache' - Next.js App Router의 파일 규칙과 라우팅: 폴더 = URL 세그먼트, page·layout·loading·error 같은 특수 파일 계층, 동적 세그먼트와 Promise params, 라우트 그룹·병렬·가로채는 라우트
- Next.js App Router의 내비게이션과 데이터 가져오기: Link·useRouter와 prefetch, 부분 렌더링과 클라이언트 캐시, 서버 컴포넌트의 병렬·순차 fetch, 요청 중복 제거와 React
cache() - React Server Components의 동작 원리: 요청 왕복을 줄이려고 나온 배경, 다시 렌더링되지 않는 서버 컴포넌트와 클라이언트 경계, RSC와 SSR의 차이, 클라이언트 컴포넌트 모듈 참조, RSC Payload 스트림과 Suspense, 갱신 시 재조정
- 서버 컴포넌트와 클라이언트 컴포넌트 조합 규칙: 클라이언트 안에 서버를 import할 수 없는 이유, children·props로 넘기기, Server Function
관련 주제: 렌더링 방식의 개념은 SPA와 CSR·SSR, 스트리밍은 스트리밍 SSR에 있다.