컴포넌트 렌더링 3가지 방식

SSG (Static Site Generation): 빠르고 효율적인 정적 페이지의 왕

SSG는 세 가지 렌더링 방식 중 가장 빠르고 효율적인 방법입니다. 페이지의 내용을 빌드하는 시점에 미리 완성해 두고, 사용자의 요청이 들어오면 서버를 거치지 않고 캐시된 파일을 바로 전달합니다.

주요 특징

특징	내용
생성 시점	빌드(Build) 시
적합한 데이터	정적이고 변화가 거의 없는 데이터 (회사 소개, 약관, FAQ, 제품 상세 페이지)
핵심 원리	빌드 시점에 HTML 파일을 생성하고 CDN(Content Delivery Network)에 배포 및 캐시

 

장점

• 압도적인 속도: 사용자가 요청하면 CDN에서 즉시 정적 파일을 받아보므로 로딩 속도가 매우 빠릅니다.
• 최소 서버 부하: 서버는 페이지 생성에 관여하지 않으므로 트래픽이 몰려도 부하가 거의 없습니다.
• 최고의 SEO: 검색 엔진 크롤러가 미리 완성된 HTML을 즉시 읽을 수 있습니다.

단점

• 데이터 업데이트 시 재빌드 필수: 데이터베이스 내용이 변경되면 사이트 전체를 다시 빌드하고 배포해야만 내용이 갱신됩니다. 실시간 데이터에는 부적합합니다.

---

 

ISR (Incremental Static Regeneration): SSG의 속도와 갱신의 유연성 결합

ISR은 Next.js만의 독특한 혁신 기술로, SSG의 빠른 속도를 유지하면서도 데이터 갱신 문제를 해결합니다. '정적 페이지를 점진적으로 재생성'한다는 의미를 가집니다.

 주요 특징

특징	내용
생성 시점	빌드 시 최초 생성 + 주기적 재검증 (Runtime)
적합한 데이터	주기적으로 업데이트되지만 즉각적인 실시간성이 필요 없는 콘텐츠 (블로그 포스트, 뉴스 기사)
핵심 원리	revalidate 옵션으로 재검증 주기를 설정하여 백그라운드에서 캐시를 자동 업데이트

 

동작 원리 (60초 주기 예시)

1. 최초 요청: 빌드된 정적 페이지를 즉시 제공합니다.
2. 60초 경과 후 요청:
   • 사용자에게는 기존의 캐시된 페이지를 즉시 보여줍니다. (속도 유지)
   • 동시에 서버에서 백그라운드 재생성을 시작하여 최신 데이터로 페이지를 다시 만듭니다.
3. 다음 요청: 재생성된 최신 페이지를 제공합니다.

장점

• SSG와 동일한 빠른 속도: 대부분의 사용자에게 캐시된 정적 파일을 제공합니다.
• 데이터 갱신 유연성: 전체 사이트를 재빌드하지 않아도 설정된 주기마다 페이지 내용을 최신화할 수 있습니다.

단점

• 즉각적인 갱신 불가능: 데이터가 바뀌어도 revalidate 주기가 지나기 전까지는 이전 내용이 표시될 수 있습니다.

 

---

SSR (Server-Side Rendering): 요청 시 생성하는 동적 페이지의 표준

SSR은 사용자의 요청이 들어오는 그 순간에 서버에서 필요한 데이터를 가져와 페이지를 생성하는 전통적인 방식입니다. 개인화된 데이터나 실시간 정보 제공에 최적화되어 있습니다.

 주요 특징

특징	내용
생성 시점	요청(Request) 시 (Runtime)
적합한 데이터	실시간으로 변하거나 사용자별로 개인화되어야 하는 데이터 (마이페이지, 장바구니, 실시간 검색 결과)
핵심 원리	요청마다 서버가 DB/API 통신 → HTML 생성 → 브라우저로 전송

 

장점

• 항상 최신 데이터 보장: 요청 시 생성되므로 사용자는 항상 가장 최신 정보를 보게 됩니다.
• 개인화 콘텐츠: 로그인 정보 등을 활용하여 사용자 맞춤형 콘텐츠를 완벽하게 제공할 수 있습니다.
• 뛰어난 SEO: SSG와 마찬가지로 완전한 HTML이 크롤러에게 전달됩니다.

단점

• 느린 초기 응답: 요청마다 서버가 모든 작업을 수행해야 하므로 SSG/ISR에 비해 초기 로딩 시간 길어질 수 있습니다.
• 서버 부하 높음: 트래픽이 증가할수록 서버의 CPU와 메모리 사용량이 비례하여 증가합니다.

---

결론 : 상황에 맞는 최적의 전략 선택

Next.js의 진정한 힘은 이 세 가지 전략을 하나의 애플리케이션 내에서 페이지별로 유연하게 혼합하여 사용할 수 있다는 점입니다.