[Next.js] Next.js Suspense(Next.js 14)

Suspense

Next.js에서 스트리밍을 표현하는 방법을 이해하려면, 서버 사이드 렌더링(SSR)의 한계를 이해하는 것이 중요하다.

스트리밍은 서버에서 렌더링된 콘텐츠를 클라이언트에 점진적으로 전송하여 사용자 경험을 향상시키는 기술이다.

 

1. 페이지의 모든 데이터가 서버로 가져옴
2. 서버는 해당 페이지의 HTML을 렌더링
3. 당 페이지의 HTML, CSS, JavaScript가 클라이언트로 전송
4. 생성된 HTML 및 CSS를 사용하여 비대화형 사용자 인터페이스(non-interactive user interface)가 표시된다.
5. React가 사용자 인터페이스를 상호 작용 가능하게 만듬

non-interactive user interface : 사용자와 상호작용할 수 없는 사용자 인터페이스를 의미합니다. 이러한 인터페이스는 사용자가 클릭하거나 입력할 수 있는 요소가 없고, 단순히 정보를 제공하는 데 그치는 형태

• 위 단계에서, suspense는 4번의 단계에서 사용하게 된다.

코드 예시

• 외부로부터 데이터를 가져오는 하위컴포넌트의 상위 컴포넌트를 생성한다.
• fallback prop에는 로딩 중에 보여줄 대체 컴포넌트를 넣어준다.

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

type Props = {
  params: {
    id: string;
  };
};

export default async function MovieDetail({ params }: Props) {
  return (
    <div>
      <h1>Movie Detail Page</h1>
      <Suspense fallback={<h1>Loading movie info</h1>}>
        <MovieInfo id={params.id} />
      </Suspense>
      <Suspense fallback={<h1>Loading movie videos</h1>}>
        <MovieVideos id={params.id} />
      </Suspense>
    </div>
  );
}

// movie-info
import { API_URL } from "../app/(home)/page";

async function getMovie(id: string) {
  console.log(`Fetching movies: ${Date.now()}`);
  await new Promise((resolve) => setTimeout(resolve, 5000)); // 5초 지연
  const response = await fetch(`${API_URL}/${id}`);
  const json = await response.json();
  return json;
}

export default async function MovieInfo({ id }: { id: string }) {
  const movie = await getMovie(id);
  return <h6>{JSON.stringify(movie)}</h6>;
}

// movie-videos
import { API_URL } from "../app/(home)/page";

async function getVideos(id: string) {
  console.log(`Fetching videos: ${Date.now()}`);
  await new Promise((resolve) => setTimeout(resolve, 3000)); // 3초 지연
  const response = await fetch(`${API_URL}/${id}/videos`);
  const json = await response.json();
  return json;
}

export default async function MovieVideos({ id }: { id: string }) {
  const videos = await getVideos(id);
  return <h6>{JSON.stringify(videos)}</h6>;
}

• 로딩되는 동안은 loading 글자가 띄워지고, 로딩 단계가 끝나면 해당 컴포넌트의 UI를 확인할 수 있다.