[공식문서 번역] NextJS 클라이언트 컴포넌트

Client Components

---

클라이언트 컴포넌트

클라이언트 컴포넌트는 서버에서 미리 렌더링된 상호작용이 가능한 UI를 작성할 수 있게 하고, 브라우저에서 동작하는 JavaScript를 사용할 수 있게 해준다.
이 페이지는 어떻게 클라이언트 컴포넌트가 동작하는지, 어떻게 그들이 렌더되는지, 그리고 언제 그것을 사용해야 하는지에 대해 알아볼 것이다.

 

Benefits of Client Rendering

---

클라이언트 렌더링의 이점

클라이언트측에서 렌더링 작업을 하는 것은 다음과 같은 2가지 이점을 가진다.

• Interactivity (상호작용): 클라이언트 컴포넌트는 상태(state), 효과(effects), 이벤트 리스너(event listeners)를 사용할 수 있게 해준다. 그것은 유저에게 즉각적인 피드백을 제공하고, UI를 업데이트할 수 있다는 의미이다.
• Browser APIs (브라우저 API): 클라이언트 컴포넌트는 geolocation, localStorage와 같은 브라우저 API에 대한 접근이 가능하다.

 

Using Client Components in Next.js

---

NextJS에서 클라이언트 컴포넌트 사용하기

클라이언트 컴포넌트를 사용하기 위해서 "use client"를 파일의 최상단, 그러니까 imports 위에 작성해야 한다.

"use client"는 서버와 클라이언트 컴포넌트 모듈 사이의 경계를 선언한다.
이것은 파일에 "use client"를 정의함으로써 해당 파일 안에서 import된 모든 모듈과 자식 컴포넌트들은 클라이언트 번들에 포함된 것으로 여겨진다는 뜻이다.

app/counter.tsx

'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>
  )
}

 

아래의 다이어그램은 만약 "use client"를 선언하지 않고 중첩된 컴포넌트(toogle.js)안에서 onClick과 useState를 사용할 경우 에러를 발생시킨다는 것을 보여준다.
App Router는 기본적으로 모든 컴포넌트를 이러한 API들을 사용하지 못하는 서버 컴포넌트로 생각하기 때문이다.
toggle.js에 "use client"를 선언하는 것은 이러한 API들을 사용할 수 있는 클라이언트 바운더리 안에 들어가겠다고 리액트에게 말하는 것이다.

 

여러개의 use client를 엔트리 포인트에 선언하는 것
리액트 컴포넌트 트리의 엔트리 포인트들에 여러개의 'use client'를 선언할 수 있다.
이것은 당신의 애플리케이션을 여러개의 클라이언트 번들로 분할할 수 있게 해준다.
그러나 "use client"는 클라이언트측에서 렌더되어야 하는 모든 컴포넌트에 선언될 필요는 없다.
한번 바운더리를 정의하면, 해당 바운더리 안에 있는 모든 자식 컴포넌트와 import된 모듈들은 클라이언트 번들에 포함된 것으로 여겨진다.

 

How are Client Components Rendered?

---

어떻게 클라이언트 컴포넌트가 렌더되어 지는지?

NestJS에서 클라이언트 컴포넌트는 요청이 전체 페이지 로드(애플리케이션에 처음 방문하거나, 브라우저 새로고침으로 인한 페이지 리로드)의 일부인지 또는 이후의 탐색 인지에 따라 다르게 렌더된다.

 

Full page load

---

초기 페이지 로드를 최적화하기 위해서, NestJS는 클라이언트, 서버 컴포넌트 모두에 대한 정적 HTML 미리보기를 서버에서 렌더하기 위해 React의 API를 사용할 것이다.
이것은 사용자가 애플리케이션에 처음 방문했을 때, 그들이 클라이언트 컴포넌트 JavaScript 번들을 다운로드하고, 파싱하고, 실행하는 것을 기다리지 않고 페이지의 내용을 즉각적으로 보게된다는 것을 의미한다.

 

서버에서는:

1. 리액트는 서버 컴포넌트를 React Server Component Payload(RSC Payload)라 불리는 특수한 형태의 데이터로 렌더한다. 그리고 이것은 클라이언트 컴포넌트에 대한 참조를 포함한다.
2. NextJS는 서버에서 HTML을 렌더하기 위해 RSC Payload와 클라이언트 컴포넌트의 JavaScript 명령어들을 사용한다.

 

그런 다음, 클라이언트에서는:

1. 서버에서 렌더한 HTML은 상호작용이 되지 않는 초기의 미리보기를 즉각적으로 보여주기 위해 사용된다.
2. RSC Payload는 클라이언트와 서버 컴포넌트 트리를 조화시키고 DOM을 업데이트하는데 사용된다.
3. JavaScript 명령은 클라이언트 컴포넌트를 hydrate하여, 상호작용이 가능한 UI를 만들기 위해 사용된다.

 

hydration이란?
Hydration은 정적인 HTML을 상호작용이 가능하도록 DOM에 이벤트 리스너를 붙이는 과정이다.
화면 뒤에서, hydration은 hydrateRoot 리액트 API를 사용하여 진행된다.

 

Subsequent Navigations

---

Subsequent Navigation에서는, 클라이언트 컴포넌트는 서버에서 렌더된 HTML 없이 전적으로 클라이언트측에서 렌더가 이루어진다.
이것은 클라이언트 컴포넌트의 JavaScript 번들이 다운로드되고 파싱된다는 것을 의미한다.
번들이 준비되면, 리액트는 클라이언트와 서버 컴포넌트 트리를 조화시키고 DOM을 업데이트하기 위해 RSC Payload를 사용한다.

 

Going back to the Server Environment

---

서버 환경으로 돌아가기

때로는 "use client"를 사용해서 클라이언트 바운더리를 정의한 다음에, 서버 환경으로 돌아가고 싶을 때도 있다.
예를 들어, 클라이언트 번들의 사이즈를 줄이고, 서버에서 데이터를 요청하고, 서버에서만 사용 가능한 API를 사용하고 싶을 수 있다.

이론적으로 클라이언트 컴포넌트 안에 중첩되어 있더라도 클라이언트와 서버 컴포넌트를 번갈아 사용하고, 서버 액션을 통해서 서버 환경으로 돌아갈 수 있다.
자세한 것은 합성 패턴(Composition Patterns)페이지를 참고해라

 

---

이걸 정리하면서 알게된 것은, 클라이언트 컴포넌트도 서버에서 미리 렌더 된다는 것이다.
지금까지는 클라이언트 컴포넌트는 온전히 클라이언트측에서 렌더가 이루어지는지 알았다.

문득 이전에 "use client"를 사용했음에도 window에 접근할 수 없다는 에러를 받았던 것이 기억났다.
그때는 어찌저찌 구글링을 통해서 window가 undefined인지 확인하는 코드를 넣어서 해결했었는데, 서버에서 렌더되기 때문에 이러한 에러가 발생했다는 것을 알게 되었다.

 

Reference

---

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