page component

page.tsx 책임

App Router에서 페이지 컴포넌트는 URL에 매핑되는 진입점입니다. 파일 위치, 서버 컴포넌트 여부, 데이터 페칭, params, 상태 UI를 순서대로 확인하면 작성 기준이 선명해집니다.

1

경로 결정

app/posts/page.tsx처럼 폴더가 URL이 되고 page 파일이 실제 화면을 담당합니다.

2

서버 기본값

별도 지시어가 없으면 서버 컴포넌트로 실행되어 DB 접근, 서버 fetch, 비밀값 사용 위치를 잡기 쉽습니다.

3

데이터 준비

async 페이지에서 데이터를 기다린 뒤 HTML을 만들고, 필요하면 캐시와 재검증 정책을 함께 정합니다.

4

상태 파일

같은 세그먼트의 loading.tsxerror.tsx로 로딩과 실패 흐름을 페이지 옆에 둡니다.

페이지가 읽는 입력

params

[id] 같은 동적 세그먼트 값입니다. 상세 페이지 데이터 조회 키로 자주 사용합니다.

searchParams

쿼리 문자열입니다. 필터, 정렬, 페이지 번호처럼 URL에 남길 화면 상태에 어울립니다.

children 없음

페이지는 최종 UI입니다. 공통 틀은 layout.tsxchildren 슬롯으로 감쌉니다.

클라이언트 전환은 필요한 부분만

이벤트 핸들러나 브라우저 API가 필요하면 작은 하위 컴포넌트에만 "use client"를 붙입니다. 페이지 전체를 클라이언트로 바꾸면 서버 데이터 페칭과 번들 크기 이점을 잃기 쉽습니다.

핵심 답안 문장

페이지 컴포넌트는 특정 라우트 세그먼트의 최종 UI를 정의하는 page.tsx 파일이며, 기본적으로 서버 컴포넌트로 실행되어 데이터 페칭과 동적 params 기반 렌더링을 담당할 수 있습니다.

page.tsx server component async fetch params loading error