Streaming과 Suspense는 Next.js에서 어떤 사용자 경험을 개선하나요?

Streaming과 Suspense는 서버 렌더링에서 느린 데이터 때문에 전체 화면이 멈추는 문제를 줄입니다. 빠르게 준비된 UI를 먼저 보내고, 늦게 준비되는 영역은 fallback을 보여준 뒤 나중에 채웁니다.

Suspense 예시

import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Header />
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews />
      </Suspense>
    </>
  );
}

Reviews 데이터가 느려도 Header와 기본 상품 정보는 먼저 렌더링될 수 있습니다.

Streaming의 UX 효과

• 첫 바이트와 첫 화면 표시가 빨라집니다.
• 사용자는 빈 화면 대신 skeleton을 보며 진행 상태를 이해합니다.
• 느린 영역을 독립적으로 로딩해 perceived performance가 좋아집니다.

주의점

Suspense 경계를 너무 잘게 쪼개면 로딩 UI가 산만해지고 요청 수가 늘어날 수 있습니다. 반대로 너무 크게 잡으면 한 느린 데이터가 전체 화면을 막습니다. 사용자가 의미 있게 볼 수 있는 단위로 경계를 정하는 것이 좋습니다.

면접 답변 포인트

Streaming은 HTML을 준비되는 대로 점진 전송하고, Suspense는 지연되는 컴포넌트의 fallback 경계를 정의합니다. 둘은 느린 데이터가 전체 UX를 막지 않도록 돕습니다.