[Next.js] Suspense

Suspense가 무엇인고...?

 

Suspense란?

Suspense는 React 컴포넌트를 잠시멈추고 기다릴 수 있도록하는 기능이다. 

로딩 중인 컴포넌트 대신 사용자에게 일시적인 UI(fallback)을 보여주고 준비가 되었을 때 실제 컴포넌트를 보여준다. 

 

Suspense 기본 문법

import { Suspense } from 'react';

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

 

MyComponent 가 로드 중일 경우 대신 fallback{<p>로딩 중...</p>}을 대신 보여주고 로드가 완료되면 <MyComponent /> 로 대체된다.

 

Suspense가 사용되는 경우

1️⃣ React.lazy()로 지연 로딩을 하는 경우 

import { Suspense, lazy } from 'react'

const LazyComponent = lazy(() => import('./HeavyComponent'))

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <LazyComponent />
    </Suspense>
  )
}

 

2️⃣ Next.js 의 use() 사용 시 (비동기)

Suspense를 명시하지 않고도 자동으로 사용할 수 있는 방법이 있다. 

 

loading.tsx를 만들어 해당 loading을 사용할 page.tsx 와 같은 파일경로 내에 위치시키면 use()호출이 Promise Pending 상태일 때 loading.tsx를 자동으로 fallback으로 사용한다. => Suspense를 내부적으로 자동 사용한다.

 

app/
├─ dashboard/
│  ├─ page.tsx
│  ├─ loading.tsx

 

// page.tsx
export default function DashboardPage() {
  const data = use(fetchData())  // 서버에서 데이터 fetch
  return <div>{data.title}</div>
}

//loading.tsx
export default function Loading() {
  return <p>로딩 중입니다...</p>
}

 

3️⃣ RCC와 함께 쓰일 경우

React Client Component는 서버에서 렌더링 되지 않기 때문에 서버 컴포넌트가 Suspense로 감싸야한다. 

Suspense로 감싸면 Client Component가 JS로 로딩될 때까지 fallback UI가 먼저 보여진다.

// layout.tsx
<Suspense fallback={<h1>로딩 중...</h1>}>
  <ReactClientComponent />
</Suspense>