app router page
page.tsx는 URL 세그먼트가 렌더링할 최종 화면을 계약한다
App Router에서 폴더 이름은 경로가 되고, 그 안의 page.tsx는 layout의 children 위치에 들어갈 페이지 UI와 서버 데이터 요청 경계를 결정합니다.
app/posts
폴더는 라우트 단위이고, 그 안에 layout, loading, error 같은 경계가 함께 놓입니다.
최종 UI 반환
페이지 컴포넌트는 children을 받지 않고, 해당 경로에서 보일 화면을 직접 반환합니다.
데이터 페칭
async 컴포넌트에서 fetch를 기다리고, revalidate 같은 캐시 정책을 경로 단위로 정합니다.
HTML 수신
서버에서 준비된 HTML이 내려오고, 필요한 클라이언트 컴포넌트만 hydrate됩니다.
경로 선택
page 생성
데이터 결정
UI 반환
먼저 URL을 정하고 폴더를 만든 뒤, 서버에서 읽을 데이터와 화면에 남길 UI 경계를 분리합니다.
상호작용이 필요할 때만 client 경계를 만든다
버튼 상태, 브라우저 API, 이벤트 핸들러가 필요하면 작은 하위 컴포넌트에 use client를 두고 page.tsx는 서버 경계를 유지합니다.