Next.js Client Component와 Server Component

※ 카테고리 이슈가 있지만, FrontEnd에 작성하겠습니다.

 

Next.js를 사용하면 Client Component와 Server Component를 조합해서 프로젝트를 진행해야 합니다. 그럼 이 둘의 차이점은 무엇일지에 대해서 알아보겠습니다.

 

Server Component, BackEnd

서버에서 렌더링되어 클라이언트로 전송됩니다. 초기 페이지 로드 시간을 단축시킵니다. 데이터베이스, 파일 시스템에 직접 접근이 가능하고 API 호출 오버헤드를 감소시킵니다.

 

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}

export default async function Page() {
  const data = await getData()
  return <main>{data.map(item => <div key={item.id}>{item.name}</div>)}</main>
}

 

Client Component, Client

브라우저에서 실행되고 React의 모든 기능을 활용할 수 있습니다. useState, useEffect 등 React Hooks 사용이 가능합니다. 반대로 Server Component에서는 useState, useEffect를 사용할 수 없습니다.

Client Component를 사용하기 위해서는 최상단에 'use client'를 명시 후 코드 작업을 진행해야 합니다.

 

'use client'
import { useState } from 'react'
export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

 

그럼 왜 나뉘었을까?

Data Fetch와 초기 렌더링은 Server Component가 담당하고, 사용자 상호작용이 필요한 부분을 Client로 분리하여 성능 최적화를 하였습니다. 또한 Streaming과 Suspense를 활용해 데이터 로드 UI 표시가 가능하고, 점진적 콘텐츠 로드를 가능하게 만들어 사용자 친화적으로 개발이 가능해집니다. 가장 중요한 이유는 SEO 친화적인 애플리케이션을 구축할 수 있다는 점입니다.

Server Component와 Client Component를 적절히 활용하면, 서버에서 데이터를 처리하고 클라이언트에서 상호작용을 담당하는 방식으로 애플리케이션의 성능을 극대화할 수 있습니다.

이와 같이 Next.js에서는 Server Component와 Client Component의 역할을 명확히 구분하여 각각의 장점을 최대한 활용하는 구조로 개발할 수 있습니다.