Next.js 렌더링 전략 완벽 가이드: SSR, SSG, ISR부터 RSC까지

TL;DR 웹 애플리케이션은 빠른 화면 표시와 SEO, 데이터 최신성 사이에서 균형을 잡아야 합니다. Next.js는 페이지별로 SSG, SSR, ISR 중 최적의 렌더링 전략을 고를 수 있게 해줍니다. 자주 바뀌지 않는 페이지는 SSG로 미리 생성하고, 실시간성이 중요한 데이터는 SSR로 매번 받아오며, 둘의 장점을 결합한 ISR로 일정 주기마다 정적 페이지를 갱신합니다. HooneyLog 블로그는 ISR을 사용해 노션의 새 글을 자동으로 감지합니다.

문제의 배경#

웹 애플리케이션을 개발할 때 마주하는 가장 큰 고민은 "어떻게 하면 사용자에게 더 빠르게 화면을 보여주면서도 검색 엔진 최적화(SEO)를 놓치지 않을 것인가"입니다.

클라이언트 사이드 렌더링(CSR) 방식은 개발이 편하지만, 자바스크립트 파일이 로드되기 전까지 사용자는 빈 화면을 봐야 합니다. 또한 구글이나 네이버 같은 검색 로봇이 페이지 내용을 읽어가는 데 한계가 있습니다. 그렇다고 모든 페이지를 매번 서버에서 새로 만들면(SSR) 서버 부하가 커지고 응답 속도가 느려지는 병목이 생깁니다.

해결 방안 탐색#

Next.js는 이 고민을 해결하기 위해 페이지별로 최적의 렌더링 전략을 선택하는 기능을 제공합니다.

하나의 방식만 고집하는 것이 아니라, 블로그 글처럼 자주 바뀌지 않는 내용은 미리 만들어두고(SSG), 주식 차트처럼 실시간성이 중요한 데이터는 매번 서버에서 가져오는(SSR) 식으로 상황에 맞는 도구를 골라 쓸 수 있습니다. 특히 최근에는 리액트 서버 컴포넌트(RSC) 개념이 도입되면서 서버와 클라이언트의 경계가 더 명확하고 효율적으로 바뀌었습니다.

핵심 개념 및 아키텍처#

SSG (Static Site Generation)#

빌드 시점에 HTML 파일을 미리 생성해두는 방식입니다. 사용자가 접속하면 서버는 이미 만들어진 파일을 그대로 내어주기만 하면 되므로 속도가 압도적으로 빠릅니다. 주로 소개 페이지나 도움말 문서처럼 정적인 콘텐츠에 사용합니다.

SSR (Server Side Rendering)#

사용자의 요청이 들어올 때마다 서버에서 즉석으로 HTML을 생성합니다. 데이터가 항상 최신 상태여야 하거나 사용자의 권한에 따라 화면이 달라져야 할 때 필수입니다.

ISR (Incremental Static Regeneration)#

SSG의 빠른 속도와 SSR의 데이터 최신성을 결합한 방식입니다. 설정한 시간(예: 60초)마다 백그라운드에서 정적 페이지를 재생성합니다. HooneyLog 블로그가 바로 이 방식을 사용해 노션의 새 글을 자동으로 감지합니다.

RSC (React Server Components)#

Next.js 13 버전부터 도입된 핵심 기술로, 컴포넌트 자체를 서버에서 실행하여 클라이언트로 전달합니다. 브라우저로 전송되는 자바스크립트 번들 크기를 크게 줄여주며, 서버 환경의 자원(DB, 파일 시스템)에 직접 접근할 수 있어 보안성이 뛰어납니다.

구현 및 트러블슈팅#

Next.js 15(App Router) 환경에서 각 전략을 구현하는 코드는 다음과 같습니다.

데이터 패칭 기반의 전략 선택#

복사
// 1. SSR 구현 (항상 최신 데이터 유지)
async function Page() {
  const res = await fetch('https://api.example.com/data', { cache: 'no-store' });
  const data = await res.json();
  return <div>{data.title}</div>;
}

// 2. ISR 구현 (60초마다 갱신)
// 이 방식은 성능과 최신성 사이의 최고 타협점입니다.
export const revalidate = 60; 

async function Page() {
  const res = await fetch('https://api.example.com/data'); // 기본적으로 캐싱됨
  const data = await res.json();
  return <div>{data.title}</div>;
}

트러블슈팅: Hydration Mismatch#

서버에서 생성한 데이터와 클라이언트에서 렌더링한 데이터가 다를 때(예: new Date() 사용) 발생하는 에러입니다. 해결하려면 서버와 클라이언트가 동일한 포맷을 유지하도록 유틸리티 함수를 사용하거나, useEffect로 클라이언트 사이드에서만 특정 로직이 돌도록 제어합니다.

결과 및 Trade-off#

각 전략을 도입했을 때 얻는 결과와 포기해야 하는 점은 명확합니다.

• SSG/ISR: 첫 로딩 속도가 매우 빠르고 서버 비용이 저렴합니다. 다만 노션에 글을 썼을 때 즉시 반영되지 않고 설정한 시간만큼 기다려야 합니다.
• SSR: 데이터가 항상 최신 상태입니다. 다만 요청마다 서버 리소스를 사용하므로 사용자가 몰릴 경우 서버 사양을 높여야 하며 응답 속도가 다소 느려질 수 있습니다.

마치며#

Next.js는 단순한 라이브러리가 아니라 현대 웹의 복잡한 문제를 해결해주는 완성형 프레임워크입니다.

이번 리팩토링으로 블로그에 적용한 ISR 전략은 개인 기술 블로그로서 가장 효율적인 선택이었습니다. 노션이라는 외부 API의 느린 속도를 캐싱으로 극복하면서도, 1분마다 새 글을 체크하기 때문입니다.

더 자세한 내용은 Next.js 공식 문서의 렌더링 파트를 읽어보시길 추천합니다.