page 컴포넌트 책임

입력 값 검증

params와 searchParams를 곧바로 신뢰하지 않고 형식과 존재 여부를 확인한다.

DB나 비밀 API 접근은 page 서버 컴포넌트에서 처리하고 필요한 값만 하위로 넘긴다.

page 전체를 client로 올리지 말고 버튼, 폼, 필터처럼 필요한 부분만 client component로 만든다.

async page

서버 fetch page 컴포넌트가 async일 수 있어 서버 데이터 준비에 자연스럽다.

클라이언트 hook은 쓸 수 없다.

params

URL 입력 동적 segment 값이 문자열로 들어오므로 도메인 값으로 검증한다.

없는 값은 notFound로 닫는다.

쿼리 상태 정렬, 필터, 페이지 번호 같은 URL 상태를 읽는다.

캐시 키와 연결된다.

children UI

표현 분리 큰 page는 section component로 쪼개되 데이터 방향은 단순하게 유지한다.

과도한 prop drilling은 경계를 다시 본다.

client화 page 전체에 use client를 붙이지 않아도 되는가.

입력 잘못된 params와 query가 조용히 빈 화면이 되지 않는가.

데이터 서버에서 끝낼 수 있는 fetch를 브라우저로 미루지 않았는가.

export default async function Page({ params, searchParams }) {
  const data = await loadPageData(params.slug);
  return <PageView data={data} />;
}