Suspense components

 

 

Next.js에서 Suspense는 React의 Suspense 컴포넌트를 사용하여 비동기 작업(주로 데이터 가져오기)을 처리할 때 UI를 더 잘 관리할 수 있도록 도와줍니다. Suspense는 데이터가 로드되기 전까지 로딩 상태를 표시하고, 데이터가 준비되면 실제 UI를 렌더링합니다.

React의 Suspense는 서버 측에서 데이터를 미리 가져와서 페이지를 렌더링할 때 사용할 수 있으며, 이는 사용자 경험을 향상시키는 데 매우 유용합니다. Next.js는 이러한 기능을 지원하여 서버 측에서 데이터를 가져와 렌더링하는 것을 더욱 쉽게 만들어 줍니다.

기본 개념
Suspense는 컴포넌트가 렌더링하기 전에 데이터가 준비될 때까지 기다릴 수 있게 해줍니다. 로딩 상태를 표시할 때 fallback 속성을 사용합니다.

사용 예제
다음은 Suspense를 사용하는 기본적인 예제입니다.

 

import React, { Suspense } from 'react';

const SomeComponent = React.lazy(() => import('./SomeComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SomeComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

 

 

 

Next.js에서 Suspense 사용하기

Next.js는 Suspense를 서버 측 데이터 가져오기와 함께 사용할 수 있는 기능을 제공합니다. 이는 React 18의 서버 컴포넌트 기능과 결합하여 더 나은 서버 렌더링을 지원합니다.

 

import { Suspense } from 'react';

async function fetchData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await res.json();
  return data;
}

function Posts() {
  const data = fetchData();
  return (
    <div>
      {data.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

export default function Page() {
  return (
    <div>
      <Suspense fallback={<div>Loading posts...</div>}>
        <Posts />
      </Suspense>
    </div>
  );
}

 

이 예제에서는 Posts 컴포넌트가 비동기 함수 fetchData를 사용하여 데이터를 가져오며, Suspense는 데이터가 로드되는 동안 "Loading posts..."를 표시합니다.

 

 

주의사항

1. 서버 컴포넌트와 클라이언트 컴포넌트 분리: Next.js에서는 서버에서만 실행되는 컴포넌트와 클라이언트에서만 실행되는 컴포넌트를 구분해야 합니다. Suspense를 사용할 때 이 점을 고려해야 합니다.
2. Suspense와 ErrorBoundary: 데이터 가져오기에 실패했을 때를 대비하여 ErrorBoundary를 함께 사용하는 것이 좋습니다. 이를 통해 더 나은 사용자 경험을 제공할 수 있습니다.

 

결론

Next.js에서 Suspense를 사용하면 데이터가 준비될 때까지 UI를 관리하는 데 매우 유용합니다. 이는 비동기 작업을 처리할 때 더 나은 사용자 경험을 제공하며, 서버 렌더링과 결합하여 성능을 최적화할 수 있습니다. Next.js 13 이상에서는 서버 컴포넌트와 함께 사용할 수 있어 더욱 강력한 기능을 제공합니다.