기본적으로, layouts와 pages는 Server Components이며, 이를 통해 서버에서 데이터를 가져오고 UI의 일부를 렌더링하며, 필요에 따라 결과를 캐시하고 클라이언트로 스트리밍할 수 있다.

상호작용 또는 브라우저 API가 필요할 때에는 Client Components를 사용해 기능을 추가할 수 있다.

이 페이지에서는 Next.js에서 Server와 Client Components가 어떻게 동작하는지, 그리고 언제 사용해야 하는지 설명하며, 애플리케이션에서 이 둘을 함께 구성하는 예시를 제공한다.

1. Server와 Client Components를 언제 사용해야 할까? (When to use Server and Client Components?)

클라이언트와 서버 환경은 서로 다른 기능을 가지고 있다. Server와 Client Components는 사용 사례에 따라 각각의 환경에서 로직을 실행할 수 있도록 한다.

Client Components를 사용해야 하는 경우는 다음과 같다.

• 상태와 이벤트 핸들러가 필요할 때. 예: onClick, onChange
• 라이프사이클 로직이 필요할 때. 예: useEffect
• 브라우저에서만 사용할 수 있는 API가 필요할 때. 예: localStorage, window, Navigator.geolocation 등
• 커스텀 훅을 사용할 때

Server Components를 사용해야하는 경우는 다음과 같다.

• 데이터베이스나 API로부터 원본에 가까운 위치에서 데이터를 가져와야 할 때
• 클라이언트에 노출되지 않아야 하는 API 키, 토큰, 기타 비밀값을 사용해야 할 때
• 브라우저로 전송되는 자바스크립트 양을 줄이고 싶을 때
• FCP(First Contentful Paint)를 개선하고, 콘텐츠를 클라이언트로 점진적으로 스트리밍하고 싶을 때

예를 들어, <Page> 컴포넌트는 게시물에 대한 데이터를 가져오는 Server Components이며, 이 데이터를 props로 클라이언트 상호작용을 처리하는 <LikeButton> 컴포넌트에 전달한다.

• app/[id]/page.tsx

  import LikeButton from '@/app/ui/like-button'
  import { getPost } from '@/lib/data'
   
  export default async function Page({
    params,
  }: {
    params: Promise<{ id: string }>
  }) {
    const { id } = await params
    const post = await getPost(id)
   
    return (
      <div>
        <main>
          <h1>{post.title}</h1>
          {/* ... */}
          <LikeButton likes={post.likes} />
        </main>
      </div>
    )
  }
  

• app/ui/like-button.tsx

  'use client'
   
  import { useState } from 'react'
   
  export default function LikeButton({ likes }: { likes: number }) {
    // ...
  }