웹 페이지 렌더링 전략: 정적 생성 vs 서버 사이드 렌더링

소개

현대 웹 개발에서 페이지 렌더링 방식은 애플리케이션의 성능, SEO, 사용자 경험에 직접적인 영향을 미칩니다. Next.js는 정적 생성(Static Generation) 과 서버 사이드 렌더링(Server-Side Rendering) 을 모두 지원하여 개발자에게 유연성을 제공합니다.

정적 생성(Static Generation)의 심층 분석

작동 원리

정적 생성은 빌드 타임에 HTML을 생성하는 방식입니다. 빌드 과정에서 모든 페이지가 미리 렌더링되어 정적 HTML 파일로 저장됩니다.

jsx

// 기본 정적 생성
export default function StaticPage() {
  return <div>이 페이지는 빌드 시점에 생성됩니다</div>;
}

// 데이터를 포함한 정적 생성
export async function getStaticProps() {
  const posts = await fetchBlogPosts();
  return { 
    props: { posts },
    // 10초마다 페이지 재생성 (ISR)
    revalidate: 10 
  };
}

증분 정적 재생성(ISR)

Next.js의 혁신적인 기능인 ISR(Incremental Static Regeneration)은 전체 사이트를 다시 빌드하지 않고도 페이지를 정적으로 재생성할 수 있게 해줍니다.

jsx

// ISR 구현 예제
export async function getStaticProps() {
  const product = await fetchProduct(productId);
  return {
    props: { product },
    revalidate: 60 // 60초마다 재검증
  };
}

성능 데이터

메트릭	정적 생성	서버 사이드 렌더링	클라이언트 사이드 렌더링
초기 로드 시간	~0.1s	~0.5s	~1.0s
TTFB (Time to First Byte)	최소	중간	최소
FCP (First Contentful Paint)	빠름	중간	느림
SEO 효과	최고	좋음	제한적
서버 부하	최소 (빌드 시만)	높음 (매 요청마다)	낮음

서버 사이드 렌더링(SSR)의 심층 분석

작동 원리

서버 사이드 렌더링은 요청 시점에 HTML을 생성합니다. 사용자가 페이지를 요청할 때마다 서버에서 페이지를 렌더링하고 완성된 HTML을 전송합니다.

jsx

// 서버 사이드 렌더링 구현
export async function getServerSideProps(context) {
  // 요청 파라미터, 쿠키, 헤더 등에 접근 가능
  const { req, query } = context;
  const userAgent = req.headers['user-agent'];
  const userId = getUserIdFromCookie(req);
  
  const userData = await fetchUserData(userId);
  return {
    props: { 
      userData,
      deviceType: detectDeviceType(userAgent)
    }
  };
}

동적 라우팅과 국제화

SSR은 동적 라우팅과 국제화(i18n) 구현에 특히 유용합니다:

jsx

// 동적 라우팅의 서버 사이드 렌더링
export async function getServerSideProps({ params, locale }) {
  const { id } = params;
  const product = await fetchProductInLanguage(id, locale);
  
  return {
    props: {
      product,
      locale
    }
  };
}

하이브리드 접근법의 실제 사례

이커머스 플랫폼 사례

정적 생성: 제품 카탈로그, 카테고리 페이지, 마케팅 랜딩 페이지
ISR: 제품 상세 페이지 (재고 및 가격 업데이트를 위해 주기적 재생성)
SSR: 사용자 장바구니, 체크아웃 페이지, 개인화된 추천

jsx

// 제품 상세 페이지 (ISR)
export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);
  return {
    props: { product },
    revalidate: 300 // 5분마다 재검증
  };
}

export async function getStaticPaths() {
  const popularProducts = await fetchPopularProducts();
  
  return {
    paths: popularProducts.map(product => ({
      params: { id: product.id }
    })),
    fallback: 'blocking' // 인기 상품은 미리 빌드, 나머지는 첫 요청 시 생성
  };
}

콘텐츠 중심 사이트 사례

정적 생성: 블로그 포스트, 문서, FAQ
ISR: 댓글이 있는 블로그 포스트 (댓글 업데이트를 위해)
SSR: 검색 결과 페이지, 개인화된 대시보드

성능 최적화 팁

정적 생성 최적화

선택적 정적 경로 생성: 인기 있는 페이지만 빌드 시 생성하고 나머지는 필요할 때 생성
효율적인 데이터 페칭: getStaticProps 내에서 필요한 데이터만 가져오기
이미지 최적화: Next.js Image 컴포넌트 사용하여 이미지 최적화

서버 사이드 렌더링 최적화

서버 캐싱: 자주 변경되지 않는 데이터는 서버 측에서 캐싱
스트리밍 SSR: React 18의 Suspense와 함께 사용하여 페이지 일부 먼저 전송
엣지 컴퓨팅: Vercel Edge Functions나 Cloudflare Workers를 활용한 SSR

결론

렌더링 전략 선택은 프로젝트의 요구사항, 대상 사용자, 콘텐츠 유형에 따라 달라집니다. Next.js의 유연성을 활용하여 단일 애플리케이션 내에서도 페이지별로 최적의 렌더링 방식을 선택할 수 있습니다.

정적 생성: 콘텐츠가 자주 변경되지 않고 성능이 중요한 경우
ISR: 콘텐츠가 주기적으로 업데이트되지만 모든 요청마다 재생성할 필요는 없는 경우
서버 사이드 렌더링: 실시간 데이터나 요청별 맞춤형 콘텐츠가 필요한 경우

각 프로젝트의 특성을 고려하여 적절한 전략을 선택하고, 필요에 따라 혼합 사용하는 것이 최상의 결과를 가져올 수 있습니다.