Streaming Rendering으로 FCP 단축 테스트

 

Streaming Rendering을 실험해보았다.

Streaming Rendering은 HTML을 청크단위로 내보내는거다.

 

Streaming Rendering 미적용

 

export default function PPRTestPage() {
  return (
    <div>
      <h1>Partial Prerendering Test</h1>
      <p>This part is static and pre-rendered.</p>

      <SlowComponent />
    </div>
  );
}

export async function SlowComponent() {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  const currentTime = new Date().toLocaleTimeString();
  return <p>This part is dynamically rendered at {currentTime}.</p>;
}

 

SlowComponent가 서버에서 렌더링되기 전까지 전체 페이지가 렌더링되지 않는다.

 

위 코드는 렌더링하는데 2초가 걸리고 FCP도 2초가량 걸린다.

 

 

 

Streaming Rendering 적용

의도적으로 느리게만든 서버컴포넌트 SlowComponent를 Suspense로 감싼다.

 

이렇게 하면 서버에서 HTML을 청크단위로 내보내면서 SlowComponent를 기다리지 않고 fallback ui를 보내준다.

 

 

 

Streaming Rendering을 적용하며 FCP가 아주 많이 단축된것을 볼 수 있다.