웹 렌더링 방식의 이해 (SPA, CSR, SSR, SSG, ISR, PPR)

웹 서비스를 개발할 때 가장 중요한 결정 중 하나는 화면을 어디서 어떻게 그릴 것인가이다.
웹의 기본 구조인 SPA부터 최신 렌더링 트렌드인 PPR까지 알아보자.

---

MPA vs SPA

웹 렌더링을 이야기하기 전에, 먼저 두 가지 웹 아키텍처를 비교해야 한다.

MPA(Multi Page Application) 는 전통적인 방식으로, 사용자가 링크를 클릭할 때마다 서버에서 완성된 HTML 페이지를 새로 받아 전체 화면이 새로고침된다.

반면 SPA(Single Page Application) 는 최초 접속 시 한 번만 리소스를 받고, 이후에는 페이지를 새로고침하지 않고 동적으로 화면을 교체하는 방식이다.
이 흐름에서 "왜 SPA가 등장했는가"를 이해하면, 뒤에 나오는 렌더링 방식들의 맥락이 훨씬 자연스럽게 연결된다.

---

SPA (Single Page Application)

렌더링 방식이 아닌, 웹 애플리케이션의 아키텍처다.

• 최초 접속 시 브라우저가 빈 HTML과 전체 자바스크립트를 한 번만 다운로드한다.
• 이후에는 전체 페이지를 새로고침하지 않고, 데이터만 받아와 필요한 부분만 동적으로 교체한다.
• 페이지 이동 시 새로고침이 발생하지 않아 부드러운 UX를 제공한다.
• 이 SPA 구조를 구현하기 위해 기본적으로 CSR 방식을 사용한다.

---

CSR (Client Side Rendering)

화면을 브라우저(클라이언트) 가 직접 그리는 방식

브라우저가 빈 HTML과 자바스크립트를 다운받은 뒤, 클라이언트 단에서 직접 데이터를 조합해 화면을 그린다.

장점

• 초기 로딩 이후 라우팅이나 상호작용 속도가 매우 빠르다.
• 서버는 데이터만 제공하면 되므로 서버 부하가 적다.

단점

• 자바스크립트를 모두 다운로드하고 실행할 때까지 빈 화면이 노출되어 초기 로딩 속도(TTV) 가 느리다.
  • TTV(Time To View): 사용자가 화면을 처음 볼 수 있게 되는 시점
• 빈 HTML을 먼저 제공하므로 검색 엔진 크롤러가 콘텐츠를 읽지 못해 SEO에 취약하다.

---

SSR (Server Side Rendering)

화면을 서버가 그려서 내려주는 방식

클라이언트가 페이지를 요청할 때마다 서버에서 데이터가 포함된 완성된 HTML을 생성해 브라우저에 전달한다.

장점

• 완성된 HTML을 받으므로 화면이 빠르게 보이고(TTV 단축), 크롤러가 콘텐츠를 즉시 읽을 수 있어 SEO 대응이 쉽다.

단점

• 매 요청마다 서버에서 페이지를 그려야 하므로, 트래픽이 몰리면 서버 부하가 급증한다.
• TTV와 TTI의 딜레마: 화면은 빠르게 보이지만(TTV 도달), 자바스크립트가 완전히 로드되어 하이드레이션이 완료되기 전까지는 버튼을 눌러도 반응하지 않는 상호작용 불가 시간(TTI 지연)이 발생할 수 있다.
  • TTI(Time To Interactive): 사용자가 실제로 상호작용할 수 있게 되는 시점
  • Hydration(하이드레이션): 서버에서 받은 정적 HTML에 자바스크립트를 연결해 동적으로 동작하게 만드는 과정

---

Pre-Rendering 전략

SSR의 치명적인 단점인 서버 부하를 극복하기 위해 등장한 사전 렌더링 전략이다.
요청이 들어올 때마다 페이지를 생성하는 대신, 미리 HTML을 만들어두고 제공하는 방식이다.

SSG (Static Site Generation)

빌드 시점에 HTML을 미리 생성해두는 방식

사용자가 요청할 때 페이지를 만드는 것이 아니라, 코드를 빌드하는 시점에 미리 모든 HTML을 생성해 둔다.

• 요청이 들어오면 이미 만들어둔 정적 파일을 그대로 제공하기 때문에 속도가 압도적으로 빠르고 서버 부하가 거의 없다.
• 블로그 포스트, 회사 소개 페이지 등 데이터가 자주 변하지 않는 정적인 페이지에 주로 적용한다.

ISR (Incremental Static Regeneration)

SSG + 주기적 재생성

기본적으로 SSG처럼 페이지를 미리 만들어두지만, 개발자가 설정한 특정 주기(예: 10초)마다 백그라운드에서 페이지를 최신 데이터로 다시 생성한다.

• SSG의 빠른 렌더링 속도를 유지하면서, 데이터가 과거에 머물러 있는 정적 사이트의 단점을 보완한다.
• 쇼핑몰 상품 상세 페이지처럼 기본 틀은 유지하지만 주기적인 데이터 갱신이 필요한 페이지에 적합하다.

---

PPR (Partial Pre-Rendering)

하나의 페이지 안에서 정적 영역과 동적 영역을 분리하여 렌더링하는 하이브리드 방식

Next.js 14부터 도입된 개념으로, 현재(Next.js 15 기준) 실험적(experimental) 단계다.

기존 렌더링 방식은 페이지 단위로 CSR/SSR/SSG 중 하나를 선택해야 했다.
PPR은 이 한계를 넘어, 하나의 페이지 안에서 정적인 부분과 동적인 부분을 분리해 처리한다.

• nav, footer 같은 변하지 않는 뼈대는 SSG처럼 미리 생성하여 사용자가 접속하자마자 즉시 보여준다.
• 반면 장바구니, 사용자 맞춤 추천 리스트 같은 동적 영역은 뼈대에 뚫어놓은 <Suspense> 영역을 통해 백그라운드에서 병렬로 불러와 스트리밍 방식으로 채워 넣는다.
• 빠른 초기 로딩 속도와 최신 동적 데이터 처리를 하나의 페이지 내에서 동시에 구현할 수 있다.

---

부록: SEO (Search Engine Optimization)

특정 웹 페이지가 검색 결과 상위에 노출될 수 있도록 하는 최적화 작업

검색 엔진이 이해하기 쉽도록 적절한 키워드 배치, 타 사이트로부터의 링크 확보 등 다양한 방법을 통해 검색 결과 상위 노출을 목표로 한다.
렌더링 방식 선택 시 SEO 요구사항은 중요한 판단 기준이 된다. 콘텐츠 노출이 중요한 서비스라면 SSR이나 SSG 기반의 방식이 유리하다.

---

최종 정리

웹 렌더링 방식은 크게 어디서 HTML을 생성하느냐에 따라 구분됩니다.

CSR은 브라우저가 직접 화면을 그리는 방식으로, SPA 아키텍처의 기반이 됩니다. 초기 로딩은 느리고 SEO에 취약하지만, 한 번 로드된 이후에는 빠른 사용자 경험을 제공합니다.

SSR은 매 요청마다 서버가 완성된 HTML을 생성해 내려주는 방식입니다. 빠른 TTV와 SEO 대응이 가능하지만, 서버 부하 문제와 함께 화면은 보이지만 동작하지 않는 TTV-TTI 딜레마가 단점입니다. 여기서 하이드레이션이란 서버에서 받은 정적 HTML에 자바스크립트를 연결해 인터랙션이 가능하도록 만드는 과정을 말합니다.

이 서버 부하 문제를 해결하기 위해 등장한 것이 사전 렌더링 전략입니다. SSG는 빌드 시점에 HTML을 미리 생성해 정적으로 제공하며, ISR은 여기에 주기적인 재생성을 더해 데이터 신선도를 유지합니다.

마지막으로 PPR은 하나의 페이지 안에서 정적 영역과 동적 영역을 분리해 각각 최적의 방식으로 렌더링하는 하이브리드 전략입니다. 현재 Next.js에서 실험적으로 제공 중이며, 기존 방식들의 장점을 결합한 방향으로 발전하고 있습니다.