📚 Reference

• 공식 문서 1
• 참고 자료 1

📜 Chapter

Error

ErrorBoundary

lazy

Front-end 성능 최적화, 빌드 최적화

next/dynamic

Next.js

Streaming SSR

성능 최적화 - React

Suspense

• Suspense
• suspense
  • 미결정, 불안, 걱정, 서스펜스, 긴장감
• Suspense는 React에서 비동기 로딩(데이터, 코드, UI)을 ‘기다리는 동안’ 보여줄 화면을 선언적으로 지정할 수 있는 기능이다.
• 즉, “데이터가 아직 안 왔을 때 뭘 보여줄지”를 if (!data) return <Loading />같은 imperative 방식 대신, React가 자동으로 관리하게 만든 것.
• <Suspense>를 사용하면 자식 요소의 로드가 완료될 때까지 대체 요소를 표시할 수 있다.

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

• Suspense는 React가 비동기 렌더링을 제어할 수 있게 하는 핵심 장치로, Next.js App Router에서는 스트리밍 렌더링과 함께 UX를 극대화하는 역할을 한다.

Suspense - 원리

1. React는 컴포넌트를 렌더링하면서 비동기 리소스를 만남

→ 예: await fetch() 혹은 lazy-loaded 컴포넌트 등