[Next.js] Client Rendering

 

파일 상단에 "use client"를 정의하여 사용한다.

자식 컴포넌트를 포함하여 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주된다.

 

장점

상호작용성: 클라이언트 컴포넌트는 상태, 효과 및 이벤트 리스너를 사용할 수 있으므로 사용자에게 즉각적인 피드백을 제공하고 UI를 업데이트할 수 있습니다.

브라우저 API: 클라이언트 컴포넌트는 지리적 위치나 로컬 스토리지와 같은 브라우저 API에 액세스할 수 있습니다.

 

client rendering 방법

1. full page load: server rendering와 동일하다.

2. subsequent navigation: 클라이언트 컴포넌트는 서버에서 렌더링되는 HTML 없이 전적으로 클라이언트에서 렌더링 된다.
    즉, 클라이언트 컴포넌트 자바스크립트 번들이 다운로드되고 파싱된다.

    번들이 준비되면 React는 RSC 페이로드를 사용하여 클라이언트 및 서버 컴포넌트 트리를 조정하고 DOM을 업데이트 한다.