[NextJS] async 서버 컴포넌트 단위로 병렬 처리

React에서 구현하기 어려웠던 부분을

 

NextJS에서 간단하게 처리가 가능하다.

 

각 병렬처리할 컴포넌트를 만들어 준다.

 

import { API_URL } from "../app/(Home)/page";

async function getMovies(id: string) {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return fetch(`${API_URL}/${id}`).then((response) => response.json());
}

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

 

Movie정보를 가져오는 첫번째 컴포넌트 (MoiveInfo)

 

그리고

import { API_URL } from "../app/(Home)/page";

async function getVideos(id: string) {
  await new Promise((resolve) => setTimeout(resolve, 4000));
  return fetch(`${API_URL}/${id}/videos`).then((response) => response.json());
}

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

 

Movie Video를 가지고 오는 2번째 컴포넌트 (MovieVideos)

 

이렇게 만든 컴포넌트를 가지고 

 

원하는 페이지에서 <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>
  );
}

 

이렇게 작성하면 await 동안에는 fallback이 작용하여

 

Loading movie info 와 Loading movie videos가 동시에 나타났다가,

 

fetch가 끝난 거 부터 병렬적으로 Json 데이터를 받아올 수 있다.

 

이 모든 병렬프로그래밍을 서버에서 진행한다는게 미쳤다..