[Next.js] Client Components

Client Components 이점

• 상호작용 : 클라이언트 컴포넌트에서는 useState, effects 그리고 이벤트 리스트너 사용. 즉각적으로 유저에게 반응해줄 수 있는 UI 업데이트를 제공 가능.
• 브라우저 API: 클라이언트 컴포넌트에서 geloaction 과 localStorage와 같은 브라우저 API를 사용 가능함.

 

Client Components 사용법

use Client를 컴포넌트 상단에 입력하면 해당 컴포넌트 Client Component임을 선언함과 동시에 네트워크 바운더리가 클라이언트 모듈 그래프에 정의합니다.

 

❓Network Boundary
네트워크 바운더리는 렌더링 단계에서 어디에서 렌더링을 수행해야 하는지 구분하기 위한 바운더리를 의미합니다. 영역은 총 두 가지로 client module graph 와 server module graph로 구분이 되며, 구분 방식은 use client 와 use server로 구분이 가능합니다.

 

상위 부모 컴포넌트에서 클라이언트 컴포넌트로 정의가 되면 모든 자식 컴포넌트는 클라이언트 컴포넌트로 간주 됩니다.

 

렌더링 방식

컴포넌트는 초기 페이지에 필요한 요소인지 아니면 이후에 필요한 요소인지에 따라 렌더링이 구분됩니다.

 

Full page load

Next.js에서는 페이지 렌더링 최적화를 위해, 초기 정적 HTML 파일을 생성 단계에서 React API를 사용하여 클라이언트와 서버 컴포넌트를 렌더링 합니다. 즉, 유저가 페이지에 접근하였을 때, 바로 해당 페이지의 내용을 보여주고 이후 JS 번들이 수행되도록 되어져 있습니다.

 

 

서버

1. React는 서버 컴포넌트를 특별한 데이터 형식인 React Server Component Payload(RSC Payload)로 렌더링하며, 여기에는 클라이언트 컴포넌트에 대한 참조가 포함됩니다.
2. Next.js는 RSC Payload와 클라이언트 컴포넌트의 자바스크립트 명령을 사용하여 서버에서 해당 경로에 대한 HTML을 렌더링합니다.

클라이언트

1. 생성된 HTML은 즉시 보여주기 위해 사용되며, 이는 상호작용이 불가능한 초기 빠른 미리보기를 제공합니다.
2. React Server Component Payload는 클라이언트와 서버 컴포넌트 트리를 동기화하고 DOM을 업데이트하는 데 사용됩니다.
3. 자바스크립트 명령은 클라이언트 컴포넌트를 활성화하여 사용자 인터페이스를 상호작용 가능하게 만듭니다.

 

Subsequent Navigations

후속탐색의 경우, 유저가 요청하는 페이지를 서버에서 생성하지 않고 유저쪽에서 생성하는 방식을 의미합니다. 클라이언트 컴포넌트에서 필요한 번들을 설치하고 해독하고, 준비가 되면 RSC 를 활용해 DOM을 업데이트 합니다.