Next.js App Router

한 페이지 예제

서버 컴포넌트와 클라이언트 컴포넌트가 한 페이지에서 함께 동작하는 최소 구성입니다.

클라이언트 컴포넌트use client

브라우저에서 상태를 관리합니다. 버튼을 눌러도 페이지는 다시 요청되지 않습니다.

아래 시각은 서버에서 생성됩니다. 새로고침하면 갱신되지만, 위 카운터 값은 클라이언트 상태이므로 초기화됩니다.

app/page.tsx 를 수정하면 화면이 즉시 갱신됩니다.