[Next.js 14] 3. Rendering - 3

3. Client Components

• Client Components는 Server에서 사전에 렌더링되고 브라우저에서 Javascript를 실행 시킬 수 있는 상호 작용 가능한 UI를 만들 수 있게 한다.

 

3-1. Benefits of Client Rendering

• 상호 작용성 : Client Components는 state, effects, event listener 등을 사용할 수 있다. 이는 사용자에게 즉각적인 피드백과 UI 제공이 가능하다는 의미.
• Browser API : Client Components는 Browser API에 접근이 가능하다. (localStorage, geolocation 등..)

 

3-2. Using Client Components in Next.js

• "use client" 지시어를 최상단에 사용해 Client Components를 사용할 수 있다.
• 해당 파일에서 가져온 모든 모듈을 Client 번들의 일부로 간주.

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

• onClick과 useState를 사용하는 toggle.js 파일에 "use client" 지시어가 없으면 에러 발생.
• App Route의 모든 컴포넌트는 기본적으로 Server Components로 동작하는데, 사용할 수 없는 API를 사용했기 때문.

다수의 use client 진입점 정의
- React 컴포넌트 트리에서 use client를 이용한 다수의 진입점을 정의할 수 있다.
- 여러 개의 Client 번들로 분리할 수 있다.
- 모든 컴포넌트에 use client를 선언할 필요가 없고, 한 번 선언된 컴포넌트의 자식 요소들은 모두 Client 번들로 간주된다.

 

3-3. How are Client Components Rendered?

• Next.js에서 Client Components는 전체 페이지 로드에 대한 요청인지, 후속 navigation을 통한 접근인지에 따라 다르게 렌더링 된다.

1. Full page load 

• 초기 페이지로드를 최적화하기 위해서, Next.js는 React API를 활용해 Server에서 Static HTML preview 페이지를 Client Components와 Server Components를 위해 렌더링한다.
• 이 말은, 사용자가 페이지에 처음 접근할 때 페이지를 Javascript의 다운로드를 기다리지 않고 볼 수 있다는 의미.

2. Subsequent Navigations

• 후속 navigation의 경우, Client Components는 Server에서 HTML을 렌더링 하는 과정을 거치지 않고 Client에서 전부 렌더링 된다.
• 이 말은, Client Components에서 Javascript의 다운로드 및 파싱이 발생하고, 번들이 준비가 되면 React는 RSC Payload를 사용해 Client와 Server의 컴포넌트 트리를 조정하고 DOM을 업데이트 한다는 의미.

 

3-4. Going back to the Server Environment

• 때때로, "use client"로 경계를 정의한 뒤 Server 환경으로 되돌리고 싶을 때가 있다. 예를 들어, Server에서 data를 fetch하거나 오직 Server에서만 사용 가능한 API를 사용할 때.
• 이론적으로 Client Components 하위에 있더라도 Server Components를 위치시키거나 Server Actions를 위치시킬 수 있다.

 

처음 뵙겠습니다.

Next.js 사용하면서 처음 본 개념이거나, 이해하기 어려운 부분(?)은 붉은색 볼드처리 해봤다.

 

 

Preference

• https://nextjs.org/docs/14/app/building-your-application/rendering/client-components

Rendering: Client Components | Next.js