Server Components는 SSR이 아니다!

Source: Dev.to

SSR vs. React Server Components

The SSR Analogy

• 전통적인 SSR: 서버가 전체 페이지를 HTML 문자열로 렌더링하고 이를 브라우저에 전달합니다. 그 후 클라이언트는 큰 JavaScript 번들을 다운로드해 페이지를 “hydrate”합니다. 푸터와 같은 정적 부분도 그 번들에 포함돼 비효율적일 수 있습니다.

• SSR 흐름

  1. 요청 – 브라우저가 페이지를 요청합니다.
  2. 렌더링 – 서버가 전체 HTML 문자열을 생성합니다.
  3. 전송 – 브라우저가 HTML을 즉시 표시합니다.
  4. Hydration – 클라이언트가 JavaScript를 다운로드하고 이벤트 리스너를 연결합니다. Hydration이 끝날 때까지 UI는 상호작용이 불가능합니다.

The RSC Analogy

React Server Components는 HTML을 보내지 않습니다. 대신 UI에 대한 직렬화된 설명(JSON‑유사 트리)을 전송합니다. 클라이언트는 렌더링에 필요한 부분만 받으며, 무거운 로직은 서버에 남아 있습니다.

• 번들 크기 0 – 서버 전용 컴포넌트에 존재하는 코드는 절대 서버를 떠나지 않으므로 클라이언트 번들이 작게 유지됩니다.
• 직접 데이터 접근 – 서버 컴포넌트는 데이터베이스를 직접 조회할 수 있어 별도의 API 레이어가 필요 없습니다.
• 선택적 인터랙티비티 – 클라이언트‑사이드 동작이 필요한 부분만 use client 로 표시하고, 해당 부분만 클라이언트 컴포넌트가 됩니다.

Example Server Component

// 🥩 The Server Component (The Steak)
// No 'use client' here. We are in the kitchen!
import { db } from './vibe-database';

export default async function MusicPlaylist() {
  const songs = await db.query('SELECT * FROM bachata_hits'); // Direct DB access!

  return (
    
      
## Party Mix 🎶

      {songs.map(song => (
        
          
{song.title} - {song.artist}

          {/* Import interactivity only where needed */}
          
        
      ))}
    
  );
}

Guidelines for Mixing Server and Client Components

• use client 경계: 인터랙티비티가 필요한 리프 컴포넌트에만 use client 를 배치합니다. 최상위에 넣으면 전체 트리가 클라이언트 번들로 전환됩니다.
• 서버 컴포넌트에서는 Hook 사용 금지: useState, useEffect 등은 서버 컴포넌트에서 사용할 수 없으며, 사용 시 컴파일 타임 오류가 발생합니다.
• 스트리밍 & Suspense: 비동기 부분을 “ 로 감싸 UI를 점진적으로 스트리밍합니다. 이는 VAR 리뷰가 재생을 일시정지하지만 경기 흐름은 유지하는 방식과 유사합니다.

Feature Comparison

Practical Advice

• 서버 컴포넌트부터 시작: 기본 “홈 베이스”로 간주합니다.
• 필요할 때만 클라이언트 컴포넌트 추가: 클릭, 호버, 로컬 상태와 같은 경우에만 해당 리프 노드를 Client Component 로 옮깁니다.
• 서버를 주방에 비유: 무거운 처리(데이터 패칭, 렌더링)는 주방(서버)에서 수행하고, “양념”(인터랙티브한 부분)만 클라이언트에 전달합니다. 이렇게 하면 번들 크기가 줄어들고 저사양 디바이스에서도 성능이 향상됩니다.

React Server Components와 현대 웹 개발에 미치는 영향을 더 탐구하면서 대화를 이어가세요.