Next.js(App Router)로의 연결

학습 목표

서버 렌더링, 클라이언트 상호작용, 데이터 페칭을 같은 관점으로 해석할 수 있습니다.

App Router를 읽는 관점

요청 단위로는 “어디에서 계산되고, 어디서 전달되는지”가 렌더링 비용을 이해하는 핵심입니다.

App Router에서는 서버 중심 설계와 클라이언트 보강이 기본입니다.

라우트 단위로 렌더링이 나뉘며, 핵심 흐름은 아래와 같습니다.

• 서버는 라우트 단위로 렌더링을 수행하고 HTML과 함께 라우트 정합 정보를 생성합니다.
• HTML은 먼저 화면에 표시되어 첫 노출을 빠르게 만듭니다.
• 브라우저는 HTML 기반 비인터랙티브 상태를 바인딩 대상으로 둔 뒤, 클라이언트가 hydrate되면 인터랙션을 활성화합니다.
• 이후 탐색은 RSC(React Server Component) 기반 파이프라인으로 캐시/재사용이 적용됩니다.

여기서 RSC(React Server Component) Payload는 렌더된 서버 컴포넌트 결과와 클라이언트 컴포넌트 배치 정보, 전달 props 정보를 담은 전달 포맷입니다. 클라이언트는 이를 기반으로 서버/클라이언트 트리를 정합해 화면을 맞춥니다.

하이드레이트(hydration)는 서버에서 전달된 HTML에 이벤트 바인딩을 붙여 브라우저에서 상호작용을 가능하게 만드는 단계입니다. 화면은 먼저 노출되더라도 하이드레이트 이전에는 클릭/입력 반응이 늦어질 수 있습니다. 자세한 내부 동작은 React 파트에서 다룹니다.

Server Component와 Client Component 책임 구분

Server Component에서 다루는 항목

• 세션, 권한, 민감 데이터가 필요한 초기 렌더링
• 화면에 표시할 기본 데이터 조회
• 상단 레이아웃 및 초깃값 구성

Client Component에서 다루는 항목

• 입력 처리와 즉시 반응 동작
• 브라우저 전용 API 접근
• 상호작용 상태와 실시간 사용자 피드백
• "use client"는 비용과 책임을 명확히 설명할 때 쓰는 장치로 이해합니다.

비용/책임 전환 기준

• API가 페이지 진입 즉시 필요하면 서버에서 선취합합니다.
• 사용자 이벤트에 필요한 데이터는 클라이언트에서 요청합니다.
• 느린 네트워크나 실패 시 렌더 fallback을 먼저 보여주고, 화면 복구 경로를 둡니다.
• 최초 로드는 HTML/FCP 기반 응답성으로, 후속 이동(클라이언트 사이드 네비게이션)은 Payload 캐시 효율성으로 체감 성능이 갈립니다.

다음 단계

이 흐름으로 JavaScript 전환 가이드로 이동하면 문법을 화면 동작에 바로 연결해 이어서 정리할 수 있습니다.