블로그로 돌아가기
Engineering2024-04-20 · 12 min 읽기

Rethinking Rendering Patterns in 2025

ISR, SSR, CSR? When to use what for maximum business impact.

Rethinking Rendering Patterns in 2025

웹 개발의 렌더링 패턴은 계속 진화하고 있습니다. SSR, CSR, ISR, PPR... 언제 무엇을 사용해야 할까요?

렌더링 패턴 총정리

1. Static Site Generation (SSG)

// 빌드 타임에 HTML 생성
export default async function Page() {
  const posts = await fetchPosts(); // 빌드 시 실행
  return <BlogList posts={posts} />;
}

적합한 경우:

  • 블로그, 마케팅 페이지
  • 자주 변경되지 않는 콘텐츠
  • 최고의 성능이 필요할 때

2. Incremental Static Regeneration (ISR)

export const revalidate = 3600; // 1시간마다 재생성

export default async function Page() {
  const products = await fetchProducts();
  return <ProductList products={products} />;
}

적합한 경우:

  • 이커머스 제품 페이지
  • 뉴스/콘텐츠 사이트
  • 정적의 이점 + 최신 데이터 필요

3. Server-Side Rendering (SSR)

export const dynamic = 'force-dynamic';

export default async function Page({ searchParams }) {
  const query = searchParams.q;
  const results = await search(query);
  return <SearchResults results={results} />;
}

적합한 경우:

  • 검색 결과 페이지
  • 개인화된 콘텐츠
  • 실시간 데이터가 필수인 경우

4. Client-Side Rendering (CSR)

'use client';

export default function Dashboard() {
  const { data } = useSWR('/api/analytics', fetcher);
  return <Charts data={data} />;
}

적합한 경우:

  • 대시보드, 관리자 페이지
  • 높은 인터랙티비티
  • SEO가 중요하지 않은 경우

2025년의 새로운 패턴: PPR

Partial Prerendering은 정적과 동적의 경계를 허뭅니다.

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <Header /> {/* 정적 - 빌드 시 생성 */}
      <Suspense fallback={<Skeleton />}>
        <DynamicContent /> {/* 동적 - 스트리밍 */}
      </Suspense>
      <Footer /> {/* 정적 */}
    </div>
  );
}

선택 가이드

상황추천 패턴
블로그/문서SSG
이커머스ISR
검색/필터SSR
대시보드CSR
복합 페이지PPR

결론

"항상 SSR을 써야 해" 또는 "CSR이 나빠"라는 일반화는 위험합니다. 비즈니스 요구사항을 분석하고, 페이지별로 최적의 전략을 선택하세요.