정적 렌더링(Static)과 동적 렌더링(Dynamic)의 차이

 

최근 Next.js 공식 가이드를 참고하다가 "정적과 동적 렌더링"에 대한 설명이 잘 정리되어 있어 포스팅으로 공유한다.

웹 개발에서 자주 등장하는 개념이지만, 실제 사용 사례와 코드로 접하면 더 명확하게 이해할 수 있어 정리해본다.

 

 

정적 렌더링 (Static Rendering)

정적 렌더링은 요청 전에 페이지의 HTML을 미리 생성해 두는 방식이다. 빌드 시점 혹은 최초 요청 시 데이터를 가져와 HTML로 만들어 두고, 이후에는 캐시된 결과를 재사용한다.

 

특징

• 빠른 응답 속도
• CDN 캐싱* 가능
• 자주 변경되지 않는 컨텐츠에 적합

*CDN 캐싱: 전 세계에 분산된 서버들이 컨텐츠를 미리 저장해두고 사용자의 요청에 가장 가까운 서버에서 빠르게 응답하는 방식.

 

예시 코드 (Next.js 기준)

export default async function Page() {
  const res = await fetch('https://api.example.com/static-data', {
    cache: 'force-cache',
  });
  const data = await res.json();

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

cache: 'force-cache' 는 정적 캐싱을 사용하여 데이터를 다시 요청하지 않는다.

 

 

 

동적 렌더링 (Dynamic Rendering)

동적 렌더링은 사용자의 요청이 들어올 때마다 서버가 HTML을 새로 생성하는 방식이다. 실시간 데이터나 사용자 맞춤 정보 등 변경이 잦은 컨텐츠에 적합하다.

 

특징

- 항상 최신 데이터 제공

- 요청마다 서버 렌더링 발생

- 사용자별 데이터 표시 가능

 

 

예시 코드 (Next.js 기준)

export default async function Page() {
  const res = await fetch('https://api.example.com/dynamic-data', {
    cache: 'no-store',
  });
  const data = await res.json();

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

 

cache: 'no-store' 는 매 요청마다 API를 호출하여 데이터를 받아온다.

 

 

Next.js 공식 가이드에서는 fetchRevenue() 함수 예제를 통해 동적 렌더링의 지연 특성을 강조한다.

이 함수는 내부에서 일부러 setTimeout으로 3초를 대기시킨 후 데이터를 가져오도록 구현되어 있으며, 이로 인해 페이지는 3초 동안 아무런 콘텐츠도 표시되지 않는다.

export async function fetchRevenue() {
  try {
    console.log('Fetching revenue data...');
    await new Promise((resolve) => setTimeout(resolve, 3000)); // 3초 지연
    const data = await sql<Revenue[]>`SELECT * FROM revenue`;
    console.log('Data fetch completed after 3 seconds.');
    return data;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch revenue data.');
  }
}

이처럼 사용자 요청에 따라 서버에서 데이터를 가져오는 구조에서는 API 지연이 전체 페이지 렌더링을 지연시키는 결과를 낳는다. 이는 동적 렌더링의 강력함과 동시에 단점으로 작용할 수 있는 부분이다.

 

 

 

두 방식 비교

항목	정적 렌더링 (Static)	동적 렌더링 (Dynamic)
렌더링 시점	요청 전 (빌드 시 or 사전 생성)	요청 시 실시간 생성
응답 속도	매우 빠름 (CDN 캐싱 활용)	상대적으로 느림
데이터 최신성	낮음	높음
캐싱 가능 여부	가능	불가능 (or 수동 처리)
적합한 용도	블로그, 문서, 마케팅 페이지	대시보드, 사용자 프로필 등

 

 

 

마무리

정적 렌더링과 동적 렌더링은 웹 성능, 유지보수성, 사용자 경험에 직결되는 중요한 선택지이다. Next.js에서는 fetch() 의 cache 옵션이나 revalidate 옵션을 통해 렌더링 방식을 간단하게 제어할 수 있다.

 

특히 데이터의 변경 빈도와 실시간성이 중요한 페이지라면, 렌더링 전략을 잘 설정하는 것이 중요하다.

적절한 렌더링 방식의 선택은 결국 사용자 경험과 시스템 효율성을 모두 좌우하게 된다.