PPR은 island 아키텍처인가?

• PPR은 island 아키텍처인가?
  • PPR
  • island 아키텍처
  • PPR과 island 아키텍처의 차이
  • 클라이언트 컴포넌트와 island의 비교
  • Astro의 렌더링 모델
  • 2층 아키텍처의 나선
  • 기술 선택의 나선
  • 요약

 

최근 Next.js의 새로운 렌더링 모델인 Partial Pre-Rendering(이하 PPR)이 장안의 화제인데요.

 

결론부터 말씀드리면, PPR과 island 아키텍처는 전혀 다른 개념입니다.

 

이 글에서는 PPR과 island 아키텍처의 차이점에 대해 설명하겠습니다.

 

PPR

 

먼저 PPR과 island 아키텍처의 개요를 다시 정리해보겠습니다.

 

PPR은 페이지를 static rendering으로 하면서도, 부분적으로 dynamic rendering을 가능하게 하는 렌더링 모델입니다.

 

구체적으로는, 화면을 빌드 시(또는 revalidate 후) 정적으로 생성하면서, 요청마다 처리해야 하는 일부 동적인 부분을 지연 렌더링할 수 있습니다.

 

Next.js App Router에서는 응답이 스트림 기반이기 때문에, PPR의 경우 먼저 정적인 부분이 일찍 전송되고, 지연 렌더링이 완료될 때마다 점진적으로 동적인 부분이 전송되어 하나의 HTTP 응답으로 완료됩니다.

 

다음은 Next.js의 문서에서 소개된 전자상거래 사이트의 상품 페이지 구성 예입니다.

구체적인 동작 이미지는 공식 데모 페이지를 통해 확인할 수 있습니다.

 

추천 정보나 장바구니 정보가 스켈레톤에서 대체되는 모습을 확인해 보세요.

 

PPR은 Next.js에 의해 제안되었으며 현재도 개발 중으로, Next.js v15(RC)에서 실험적인 플래그와 함께 사용할 수 있습니다.

 

Next.js의 PPR에서는 <Suspense> 경계를 통해 static/dynamic rendering을 나눌 수 있습니다.

import { Suspense } from "react";
import { PostFeed, Weather } from "./Components";

export default function Posts() {
  // Suspense의 외부는 static rendering
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        {/* PostFeed는 dynamic rendering */}
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        {/* Weather는 dynamic rendering */}
        <Weather />
      </Suspense>
    </section>
  );
}

 

 

 

island 아키텍처

 

반면 island 아키텍처(Islands Architecture)는 Astro나 Fresh 등에서 채택된 클라이언트 사이드 아키텍처입니다.

 

이는 필요한 부분만 하이드레이션하는 방식인 파셜 하이드레이션을 기반으로 구축되어 있습니다.

 

island 아키텍처는 화면 전체를 정적 HTML이라는 거대한 바다에 비유하고, 독립적인 인터랙티브 UI 군을 하나의 섬(island)으로 간주하여 "거대한 바다에 몇몇 섬이 독립적으로 존재하는 모습"을 비유하여 명명되었습니다.

 

다음은 Preact의 작성자의 블로그에서 인용한 island 아키텍처의 예입니다.

 

색이 있는 부분이 island입니다.

 

Header에는 햄버거 메뉴 등이, Sidebar에는 아코디언 등이 있어 인터랙티브하다는 것을 알 수 있습니다.

 

캐러셀은 인터랙티브한 전형적인 요소입니다.

 

색이 없는 부분은 자바스크립트를 필요로 하지 않는 정적인 HTML입니다.

 

PPR과 island 아키텍처의 차이

 

PPR과 island 아키텍처는 모두 "정적"인 부분을 기반으로 일부를 분리한다는 점에서 유사해 보일 수 있습니다.

 

앞서 언급한 그림을 비교해 보면 화면 전체를 "정적"으로 하고 일부를 분리하는 모습이 비슷할지도 모릅니다.

 

그러나, PPR의 주요 관점은 서버사이드 렌더링, island 아키텍처의 주요 관점은 클라이언트사이드 렌더링입니다.

 

같은 "정적"이라는 단어를 사용하지만, 이들은 "무엇이 정적인가"라는 점에서 전혀 다른 의미를 가지고 있습니다.

 

관점	PPR	island 아키텍처
주요 시점	서버	클라이언트
주요 최적화 대상	TTFB	자바스크립트 크기
"정적"이 의미하는 것	정적 렌더링	자바스크립트를 필요로 하지 않는 HTML

 

PPR에서 "정적"으로 표현되는 것은 정적 렌더링입니다.

 

반면 island 아키텍처에서 "정적"으로 표현되는 것은 자바스크립트를 필요로 하지 않는 비인터랙티브한 HTML입니다.

 

클라이언트 컴포넌트와 island 비교

 

여기까지 설명을 통해 이미 눈치채신 분도 있을지 모르지만, island 아키텍처에서의 island와 유사한 개념이 React나 Next.js 세계에서도 존재합니다.

 

바로 클라이언트 컴포넌트입니다.

 

서버 컴포넌트에 클라이언트 컴포넌트를 포함시키는 모습은, 마치 정적 HTML의 바다에 island를 포함시키는 모습과 흡사합니다.

 

즉, island 아키텍처는 PPR이 아니라 RSC(React Server Components) 아키텍처와 유사한 기술이라고 할 수 있습니다.

 

Astro의 렌더링 모델

 

클라이언트 컴포넌트에 대응하는 것이 island라면, 서버 컴포넌트에 대응하는 것은 무엇일까요?

 

Astro에서 말하자면 이는 Astro 템플릿입니다. 그리고 PPR과 비교할 것은 Astro 템플릿이나 island에 대한 렌더링 모델입니다.

 

Fresh에 대해서는 조사하지 않았지만, 현재 Astro에서는 페이지 단위로 SSR과 SSG가 지원되는 것 같습니다.

 

그리고 최근 PPR에 해당하는 Server islands의 구현이 검토되기 시작한 것 같습니다.

 

이들을 종합하면, Next.js 시점에서 Astro와의 관계를 비교하면 다음과 같습니다.

• PPR: Server islands 지원
• Server/Client Components: island 아키텍처

2층 아키텍처의 나선

 

앞서 언급한 Next.js와 Astro의 비교는 Dan Abramov 씨도 언급했습니다.

• Server and Client components
• Astro Templates and Astro Islands
• PHP partials and jQuery plugins

이들은 모두 2층 아키텍처의 예입니다.

 

외부 레이어는 서버 측에서 실행되고, 내부 레이어는 클라이언트 측에서(또는) 실행됩니다.

 

아이디어 자체는 새로운 것이 아니며, 많은 곳에서 사용되는 오래된 것입니다.

 

하지만 이들은 동일하지 않습니다.

 

각각에는 작은 진화가 포함되어 있으며, 시대와 함께 기술의 나선을 걷고 있습니다.

요약

 

PPR에서는 서버 측의 static/dynamic 경계를 설계할 필요가 있습니다.

 

반면 RSC 아키텍처에서는 클라이언트 측에서의 인터랙티브/비인터랙티브 경계를 설계할 필요가 있습니다.

 

이 두 층의 레이어마다 설계를 해야 한다는 점을 인식하면, island 아키텍처와 PPR은 전혀 다르며, 오히려 RSC 아키텍처와 유사한 기술임을 이해할 수 있을 것입니다.

 

이렇게 일상적으로 깊이 파고들수록 이 다단계 계산의 이해가 중요하다는 것을 느낍니다.

 

그리고 이 다단계 계산의 첫 번째 단계(서버 측)와 두 번째 단계(클라이언트 측)를 나누어 생각할 수 있다면, 복잡해 보이는 Next.js의 아키텍처가 단순해 보일 수 있을지도 모릅니다.