서버 컴포넌트(Server Components) vs 서버 사이드 렌더링(SSR) 차이

서버에서 실행된다는 공통점이 있지만, 동작 방식과 목적이 다르다.

✅ 핵심 차이 요약

	서버 컴포넌트(Server Components, RSC)	서버 사이드 렌더링(SSR)
실행 위치	일부 컴포넌트만 서버에서 실행	전체 페이지를 서버에서 렌더링
렌더링 시점	빌드 타임 + 요청 시 (선택적)	매 요청마다 서버에서 렌더링
데이터 패칭	컴포넌트 내부에서 직접 가능	getServerSideProps에서 처리
클라이언트 JS 크기	✅ 줄어듦 (클라이언트에서 JS 실행 X)	❌ 클라이언트에서 Hydration 필요
인터랙션 (이벤트 핸들러)	❌ 불가능 (클라이언트 JS 실행 X)	✅ 가능 (Hydration 후)
SEO 최적화	✅ 가능 (완전한 HTML 제공)	✅ 가능 (완전한 HTML 제공)
주요 사용처	Next.js 13+ 앱 라우터 (App Router)	Next.js 12 이하 또는 페이지 라우터 (Pages Router)

 

1️⃣ 서버 사이드 렌더링(SSR)

📌 SSR(Server-Side Rendering)란?

• 모든 React 컴포넌트를 서버에서 렌더링한 후 HTML을 클라이언트에 전달하는 방식
• 클라이언트는 받은 HTML을 다시 Hydration(JS로 변환)하여 인터랙션 가능

📌 SSR 동작 과정

1. 사용자가 페이지를 요청
2. 서버에서 React 컴포넌트를 실행하고 HTML 생성
3. HTML을 클라이언트에 전송
4. 브라우저가 HTML을 렌더링하고, React가 Hydration(상태 연결) 진행

📌 SSR 코드 예제 (Next.js Pages Router)

export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return { props: { data } };
}

export default function Page({ data }) {
  return <h1>{data.title}</h1>;
}

getServerSideProps를 사용하여 매 요청마다 서버에서 데이터를 가져와 렌더링

 

📌 SSR 장점
✔ SEO 최적화 가능 (완전한 HTML 제공)
✔ 최신 데이터 제공 (매 요청마다 새로 렌더링)

 

📌 SSR 단점
❌ 매 요청마다 서버에서 HTML을 생성 → 서버 부하 증가
❌ 클라이언트에서 Hydration 필요 → 초기 로딩 속도 느려짐

 

2️⃣ 서버 컴포넌트(Server Components, RSC)

📌 서버 컴포넌트란?

• Next.js 13+에서 도입된 개념으로, 일부 컴포넌트를 서버에서 실행할 수 있도록 한 기능
• 클라이언트에서 JS가 실행되지 않으며, 서버에서 데이터를 가져와 정적인 HTML을 전달
• 완전한 SSR이 아니라, 필요한 부분만 서버에서 실행

📌 서버 컴포넌트 동작 과정

1. Next.js가 서버에서 서버 컴포넌트만 실행하여 HTML 생성
2. 생성된 HTML을 클라이언트에 전송
3. 클라이언트는 서버 컴포넌트가 포함된 HTML을 렌더링
4. 필요하면 클라이언트 컴포넌트가 Hydration을 진행

📌 서버 컴포넌트 코드 예제 (Next.js 13+ App Router)

// 서버에서 실행 (JS 번들 X)
async function ServerComponent() {
  const res = await fetch("https://api.example.com/data", { cache: "no-store" });
  const data = await res.json();

  return <h1>{data.title}</h1>;
}

// 클라이언트에서 실행
"use client";
function ClientComponent() {
  return <button onClick={() => alert("클릭!")}>클릭</button>;
}

// 서버 컴포넌트 내부에 클라이언트 컴포넌트 포함 가능
export default function Page() {
  return (
    <div>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}

ServerComponent는 서버에서 실행되고, ClientComponent는 클라이언트에서 실행됨.

use client 지시어가 없으면 기본적으로 서버 컴포넌트로 동작함.

 

📌 서버 컴포넌트 장점
✔ 클라이언트 JS 크기 감소 → 성능 향상
✔ 서버에서 직접 데이터 패칭 가능 (fetch 사용 가능)
✔ SEO 최적화 가능

 

📌 서버 컴포넌트 단점
❌ 클라이언트에서 이벤트 핸들러 사용 불가 (서버에서 실행되기 때문)
❌ 서버와 클라이언트가 혼합된 구조 → 학습 난이도 증가

 

🚀 결론

✅ 서버 컴포넌트는 Next.js 13+에서 지원되는 최신 기능으로, 필요한 부분만 서버에서 실행하여 성능을 최적화할 수 있음.
✅ SSR은 전체 페이지를 서버에서 렌더링하여 SEO와 최신 데이터 제공에 유리하지만, 클라이언트에서 Hydration이 필요하여 초기 로딩이 느릴 수 있음.
✅ 서버 컴포넌트는 SSR보다 더 적은 JS를 클라이언트에 보내므로, 더 가벼운 페이지를 만들 수 있음.

📌 어떤 것을 선택할까?

• ✅ Next.js 12 이하 → SSR 사용 (getServerSideProps)
• ✅ Next.js 13+ 앱 라우터 → 서버 컴포넌트 사용
• ✅ 서버에서 데이터 패칭을 원하지만 JS 크기를 줄이고 싶다면 → 서버 컴포넌트 사용
• ✅ 클라이언트에서 상호작용이 많은 경우 → 클라이언트 컴포넌트 사용 ("use client")

👉 Next.js 13+에서는 기본적으로 "서버 컴포넌트 + 클라이언트 컴포넌트 혼합" 방식을 사용하면 최적의 성능을 얻을 수 있음!