[NextJS] <Suspense /> : 개별 컴포넌트에 로딩 UI 표시

<Suspense />

: React에서 비동기 데이터를 로딩할 때 로딩 UI를 처리하는 컴포넌트

• 데이터가 준비되지 않은 개별 컴포넌트나 데이터에 로딩 UI를 표시할 수 있도록 하여, 비동기 작업을 유연하게 처리할 수 있게 한다.
  
  • Page 단위 로딩 ➡ loading.tsx
  • 서버 컴포넌트 단위 로딩 ➡ <Suspense />

 

 

fallback 속성

: 로딩 중일 때 보여줄 UI를 지정하는 속성

<Suspense fallback={<div>로딩 중...</div>}>
   <MyComponent />
</Suspense>

 

 

 

예시

import { Suspense } from "react";
import MovieInfo from "../../../../components/movie-info";
import MovieVideos from "../../../../components/movie-videos";

export default async function MovieDetail({
  params: { id },
}: {
  params: { id: string };
}) {

  return (
    <div>
      <Suspense fallback={<h1>Loading movie info</h1>}>
        <MovieInfo id={id} />
      </Suspense>
      <Suspense fallback={<h1>Loading movie videos</h1>}>
        <MovieVideos id={id} />
      </Suspense>
    </div>
  );
}

 

---

 

 

Routing: Loading UI and Streaming | Next.js

 

All Courses – 노마드 코더 Nomad Coders