Next.js - Server component

Exploring the concept of server components in Next.js 13+

September 5, 2024

서버 컴포넌트의 특징과 사용법

서버 컴포넌트는 Next.js 13+ 버전의 App Router에서 기본값으로 설정되어 있습니다. 이 컴포넌트들은 서버에서 렌더링되며, 클라이언트 측 JavaScript를 필요로 하지 않습니다.

서버 컴포넌트의 주요 용도:

• 데이터 fetching
• 백엔드 리소스에 직접 접근
• 민감한 정보를 서버에 유지
• 클라이언트 측 JavaScript 양 감소

서버 컴포넌트에서는 데이터 fetching을 위해 async/await를 직접 사용할 수 있어 편리합니다.

클라이언트 컴포넌트의 특징과 사용법

클라이언트 컴포넌트를 만들려면 파일 최상단에 use client 지시어를 추가해야 합니다.

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  // ...
}

클라이언트 컴포넌트의 주요 용도:

• 상호작용 및 이벤트 리스너
• useState/useEffect 등의 훅 사용
• 브라우저 전용 API 사용
• 커스텀 이벤트 핸들러

클라이언트 컴포넌트는 첫 페이지 로드 시 서버에서 초기 렌더링되고, 이후 네비게이션에서는 클라이언트에서 렌더링됩니다.

서버 컴포넌트와 클라이언트 컴포넌트의 조합

서버 컴포넌트와 클라이언트 컴포넌트는 서로 중첩될 수 있습니다. 일반적인 패턴은 서버 컴포넌트에서 데이터를 가져와 클라이언트 컴포넌트에 props로 전달하는 것입니다. 가능하다면 컴포넌트 트리의 말단에 클라이언트 컴포넌트를 배치하여 서버 렌더링의 이점을 최대화하는 것이 좋습니다.

클라이언트 컴포넌트 내부의 서버 컴포넌트

클라이언트 컴포넌트 내부에 서버 컴포넌트를 직접 가져오는 것은 지원되지 않지만, children prop을 통해 서버 컴포넌트를 클라이언트 컴포넌트 내부에 중첩시킬 수 있습니다. 이를 Composition pattern이라고 합니다.

// ClientWrapper.js (클라이언트 컴포넌트)
'use client'

export default function ClientWrapper({ children }) {
    return <div>{children}</div>
}

// ServerComponent.js (서버 컴포넌트)
export default function ServerComponent() {
return <h1>서버 컴포넌트입니다</h1>
}

// Page.js
import ClientWrapper from './ClientWrapper'
import ServerComponent from './ServerComponent'

export default function Page() {
    return (
        <ClientWrapper>
            <ServerComponent />
        </ClientWrapper>
    )
}

이 구조에서 ServerComponent는 서버 측 렌더링 특성을 유지하면서 클라이언트 컴포넌트 내부에 중첩될 수 있습니다.