1. 개념 요약

서버 컴포넌트(Server Component)는 Next.js App Router에서 기본으로 동작하는 React 컴포넌트로, 서버 사이드에서만 렌더링되고 브라우저에 번들되지 않는다.

데이터 페칭(fetch), 환경 변수 참조, 메타데이터 생성 등을 서버에서 직접 수행
초기 HTML을 서버가 완성해 전달하므로 SEO와 첫 번째 페인트 성능(First Contentful Paint)에 유리
Next.js 에서도 페이지의 대부분을 서버 컴포넌트로 구성할 것을 권장함
렌더링 과정 요약

2. 배경 지식

React Server Components: React 18부터 도입된 개념으로, 서버에서만 실행되는 코드를 브라우저 번들에서 제거하여 클라이언트 번들 크기를 줄임
Next.js App Router: app/ 디렉토리에 작성된 파일은 기본적으로 서버 컴포넌트로 간주
메타데이터 API: generateMetadata 등을 서버 컴포넌트에서 선언해 페이지별 <head> 정보를 자동 생성
Static/Dynamic Rendering: generateStaticParams로 사전 정의된 경로를 SSG로 처리하거나, fetch + revalidate 옵션으로 ISR 구현 가능

3. 상세 설명

선언 방식
- 별도 선언 없이 기본값은 서버 컴포넌트
- 클라이언트 훅(useState, useEffect)이나 브라우저 API가 필요 없을 경우, 별도 설정 없이 서버 컴포넌트로 작성

데이터 페칭

export async function generateStaticParams() { … }
export default async function Page({ params }) {
  const data = await fetch(`/api/...`)
  return <UI data={data} />
}

fetch 호출 결과를 직접 JSX에 주입
HTTP 요청, DB 쿼리, 외부 API 호출 등
generateStaticParams
- 추가 설명