본문으로 건너뛰기
Advertisement

Next.js: 서버 컴포넌트와 렌더링 (Step 3)

1. 서버 컴포넌트 (Server Components)​

Next.js 13 버전부터 도입된 핵심 개념으로, 기본적으로 모든 컴포넌트는 서버 컴포넌트 입니다.

  • 서버에서만 렌더링되므로 JS 번들 크기가 줄어듭니다.
  • 데이터베이스나 파일 시스템에 직접 접근할 수 있습니다.
  • 보안이 중요한 API 키 등을 노출하지 않고 데이터를 가져올 수 있습니다.

2. 클라이언트 컴포넌트 (Client Components)​

브라우저에서의 상호작용(useState, useEffect, onClick 등)이 필요한 경우 사용합니다. 파일 최상단에 'use client'; 지시어를 추가해야 합니다.

'use client';

import { useState } from 'react';

export default function InteractiveCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

3. 데이터 페칭 (Data Fetching)​

서버 컴포넌트에서는 async/await를 직접 사용하여 데이터를 가져옵니다.

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts');
  return res.json();
}

export default async function Page() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

4. 렌더링 전략 개요​

  • SSG (Static Site Generation): 빌드 시점에 페이지를 생성합니다. (기본값)
  • SSR (Server Side Rendering): 요청 시점마다 서버에서 페이지를 생성합니다.
  • ISR (Incremental Static Regeneration): 정적으로 생성하되, 일정 주기로 페이지를 백그라운드에서 갱신합니다.
Advertisement
Advertisement