Progressive Rendering — 점진적 렌더링이란?

이 글은 2020년 9월 백업 아카이브에서 복원된 글입니다. 현재는 React 18 Streaming SSR 과 Next.js App Router 가 이 개념을 프레임워크 수준에서 제공합니다.

점진적 렌더링이란? Progressive Rendering (이하 PSSR) 은 Server 에서 중요한 콘텐츠를 렌더링한 후, 중요하지 않은 콘텐츠를 기다리지 않고 Client 로 Streaming 하고, 이후에 Server 에서 나머지 중요하지 않은 콘텐츠들이 렌더링되면 다시 Client 의 웹페이지로 Streaming 하는 기술입니다.

브라우저는 중요한 콘텐츠에 대한 chunk 가 수신되는 즉시 페이지에서 HTML 을 점진적으로 렌더링하기 시작하고, 브라우저가 Server 에서 수신할 때 중요하지 않은 콘텐츠는 나중에 페이지 렌더링 처리됩니다.

PSSR 동작 방식

1. Client 에서 Server 로 HTML 을 요청
2. Server 에서 API Request 생성 후, 중요한 콘텐츠를 우선 렌더링 후 Client 로 Streaming
3. Client 는 Server 에서 내려준 HTML 을 chunk 로드 후 렌더링
4. Server 에서 중요하지 않았던 나머지 콘텐츠를 렌더링하고 다시 Client 로 Streaming
5. Client 는 Server 에서 중요치 않았던 나머지 콘텐츠를 받아 렌더링
6. 전체 페이지 로드 완료 후, Client 는 일반적으로 이벤트 핸들러 및 기타 상호작용 동작을 연결하는 DOM Element 에 대한 상호 작용을 수행

PSSR 은 SSR 과 CSR 의 이점을 모두 가지고 있습니다. API 는 Server 에 함께 있기 때문에 초기 콘텐츠를 빠르게 렌더링할 수 있고, 동시에 덜 중요한 콘텐츠를 기다리지 않고 브라우저로 Streaming 하여 콘텐츠를 제공해줍니다. PSSR 을 사용하면 Javascript 를 사용하여 콘텐츠를 로드하지 않고도 비동기식으로 사이트를 더 빠르게 로드할 수 있습니다.

장점

• Server 에서 중요한 콘텐츠를 먼저 Client 로 Streaming 할 수 있음
• Javascript bundle 을 로드하는 시간 동안 콘텐츠 렌더링을 차단하지 않음
• CSR 과 SSR 의 장점을 모두 가지고 있어 페이지 로드시간이 빠름

단점

• 콘텐츠가 빠르게 표시되더라도 마지막 중요하지 않은 콘텐츠가 모두 로드된 후, Javascript 관련 상호 작용이 활성화됨
• (2020년 당시) PSSR 이 확립된 프레임워크가 아직 없으며, 웹 어플리케이션에 한계에 대한 의존도가 높음