[Next.js] Client와 Server Component 공부 [8/13 study]

 

 

Client와 Server Component

 

 

 

Client Component

- 클라이언트 컴포넌트 는, 버튼 또는 검색창과 같이 사용자와 상호작용하는 작은 UI 들을 클라이언트 단에서 렌더링되는 컴포넌트를 뜻합니다. (Client component는 어플리케이션에 client측 interactivity를 추가할 수 있게 합니다.)

- Client component로 사용하고 싶다면 use client 선언문을 통해 변경할 수 있다.

-  Next.js에선 이 컴포넌트들은 먼저 서버에서 pre-render 된 후 클라이언트에서 hydrate(JS가 실행되면서 interactive하게 됨)됩니다.

 

특징

- interactivity, event listener(onClick 등)가 필요할때 

- state 및 라이프사이클이 필요할 때

- browser-only API 사용

- custom hook depend on state or browser-only API 사용

 

사용법

- "use 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>
  )
}

 

 

Server Component

- 서버 컴포넌트 란, 말 그대로 서버 부분에서 렌더링 되는 컴포넌트입니다.

- 사용자와 상호작용하는 버튼 또는 검색창 UI 등을 제외한 나머지가 서버에서 렌더링되는 방식입니다.

- Next.js App router에서는 기본적으로 모든 컴포넌트가 Server component가 default입니다.

 

특징

- 초기 페이지 로드 속도가 향상됨

- large dependencies를 서버에서 유지/클라이언트 JS 번들 사이즈 감소

- 데이터 fetching 

- 백엔드 자원에(직접적으로) 접근

- 민감한 정보를 서버에서 유지(JWT, API Key 등등)