Next.js Suspense를 통한 Static/Dynamic Rendering 제어 및 Streaming 구현

Context

Next.js의 정적 렌더링(Static Rendering)은 빌드 타임에 모든 데이터를 resolve하여 Full Route Cache에 저장하는 구조임. 이 방식은 빠른 초기 응답을 제공하나, 비동기 데이터 fetch 시 전체 페이지 렌더링이 완료될 때까지 사용자 대기 시간이 발생하는 병목 지점이 존재함.

Technical Solution

• Suspense를 활용한 컴포넌트 단위의 Streaming 경계 설정으로 UI 렌더링 순서 최적화
• Static Route 내 Suspense 배치 시 빌드 타임에 Promise를 resolve하여 Prerendered HTML 생성
• force-dynamic 설정의 Dynamic Route에서 Suspense를 통한 서버 사이드 스트리밍 구현으로 LCP 개선
• useSearchParams 훅 사용 시 Suspense 경계를 설정하여 정적 쉘(Static Shell) 유지 및 클라이언트 사이드 렌더링 분리
• Server Action 호출 시 Read Your Own Writes 메커니즘으로 인해 Suspense Fallback이 트리거되지 않는 동작 특성 확인
• 정적 렌더링 페이지 내 일부 컴포넌트만 클라이언트 사이드에서 렌더링하는 Partial Prerendering(PPR)의 전단계 구조 설계