⚙️ Next.js 서버 컴포넌트 렌더링 방식

💡 Next.js 서버 컴포넌트(Server Component) 에서는 데이터를 언제, 어떻게 불러오느냐에 따라

서로 다른 렌더링 방식(Static / Dynamic / ISR / Streaming)을 사용할 수 있다.

🧱 렌더링 방식 한눈에 보기

🚀 렌더링 방식	⚙️ 실행 시점	⚡ 속도	🔄 최신성	🧩 주요 용도
🧊 Static Rendering	빌드 타임 (`next build`)	⚡ 매우 빠름	❌ 고정 데이터	블로그, 문서
🔥 Dynamic Rendering	요청 시마다 (서버)	🚶 느림	✅ 최신 데이터	로그인, 관리자 페이지
♻️ ISR (Incremental Static Regeneration)	빌드 + 주기적 갱신	⚡ 빠름	⏱ 약간 지연	뉴스, 상품 목록
💧 Streaming Rendering	요청 시 (부분 전송)	⚡ 빠름	✅ 최신 + 빠른 첫화면	피드, 대시보드

🧊 Static Rendering (정적 렌더링)

📅 빌드 시점에 한 번만 데이터를 불러와 HTML을 미리 생성
⚡ 매우 빠름 (CDN 캐싱 가능)
❌ 데이터 변경 시 다시 빌드 필요

// app/posts/page.tsx
export default async function PostsPage() {
  const res = await fetch("https://api.example.com/posts", {
    next: { revalidate: false }, // 완전 정적
  });
  const posts = await res.json();
 
  return <PostList posts={posts} />;
}

✅ 사용 예시: 블로그, 문서, 마케팅 페이지 등 자주 바뀌지 않는 콘텐츠

🔥 Dynamic Rendering (동적 렌더링)

🕐 요청이 들어올 때마다 서버에서 HTML을 새로 생성
✅ 항상 최신 데이터 표시
⚠️ 서버 부하 및 CORS 고려 필요

// app/dashboard/page.tsx
export default async function DashboardPage() {
  const res = await fetch("https://api.example.com/user-data", {
    cache: "no-store", // 매 요청마다 fetch
  });
  const data = await res.json();
 
  return <Dashboard data={data} />;
}

✅ 사용 예시: 로그인 사용자 페이지, 관리자 페이지, 실시간 데이터

♻️ Incremental Static Regeneration (ISR)

🧩 정적 페이지를 미리 생성해두고, 일정 주기마다 자동으로 재생성
⚡ 빠른 응답 + 🔄 최신 데이터 조합 가능
백그라운드에서 조용히 업데이트됨

// app/news/page.tsx
export default async function NewsPage() {
  const res = await fetch("https://api.example.com/news", {
    next: { revalidate: 60 }, // 60초마다 백그라운드 갱신
  });
  const news = await res.json();
 
  return <NewsList news={news} />;
}

✅ 사용 예시: 뉴스 목록, 쇼핑몰 상품 페이지, 피드

💧 Streaming Rendering (스트리밍 렌더링)

🚀 페이지 일부만 먼저 보여주고, 나머지는 서버에서 렌더링 완료 후 순차적으로 전송
⏱ 빠른 초기 화면 (Time to First Byte 감소)
🧠 UX 향상 (로딩 중에도 사용자에게 정보 제공)

// app/page.tsx
import { Suspense } from "react";
import Posts from "./Posts";
 
export default function Home() {
  return (
    <div>
      <h1>홈</h1>
      <Suspense fallback={<p>로딩중...</p>}>
        <Posts /> {/* 느린 API를 호출하는 서버컴포넌트 */}
      </Suspense>
    </div>
  );
}

✅ 사용 예시: 대형 데이터 페이지, 느린 API 로딩, 대시보드

🧭 어떤 방식을 써야 할까?

🧩 상황	💡 추천 렌더링 방식
블로그, 문서, 회사 소개 등 고정 콘텐츠	🧊 Static Rendering
로그인 후 개인화된 데이터	🔥 Dynamic Rendering
자주 갱신되는 공개 콘텐츠	♻️ ISR
부분 로딩 UX, 피드 / 대시보드	💧 Streaming

🧠 핵심 요약

🧠 Static: 한 번만 만들어둔다

🔥 Dynamic: 매번 새로 만든다

♻️ ISR: 일정 시간마다 다시 만든다

💧 Streaming: 천천히 나눠서 보여준다