Skip to main content

Dynamic content 실전 서브앱

동적 작업은 Suspense 경계로 요청 시점 렌더링을 명시해야 합니다.

경계 유무와 실행 모드를 바꿔 shell/fallback/완료 시점을 비교해보세요.

파일 구조

cache-components/dynamic-content/
|- page.tsx
\- demo/
   \- page.tsx

핵심 코드

<Suspense fallback={<p>Loading..</p>}>
  <DynamicContent />
</Suspense>

실전 점검 체크리스트

  • - 동적 컴포넌트를 Suspense로 감싸기
  • - fallback shell 포함 확인
  • - 경계를 동적 부분 근처로 이동
← 스터디로 돌아가기