NextJs (6) Parallel Requests : Promise.all & Suspense

📚 Parallel Requests

💡 두 개의 데이터 소스로부터 fetch해오는 방식을 최적화 하는 방법.

✅ 한 개의 데이터만 fetch 한 상황

• 홈페이지에 데이터를 fetch 해온 후 코드

// app/(home)/page.tsx

async function getMovies() {
  const response = await fetch(API_URL);
  const json = await response.json();
  return json;
}

export default async function HomePage() {
  const movies = await getMovies();
  return (
    <div>
      {movies.map((movie) => (
        <li key={movie.id}>
          <Link href={`/movies/${movie.id}`}>{movies.title}</Link>
        </li>
      ))}
    </div>
  );
}

✅ 두 개의 데이터를 fetch 한 상황

• 위 홈페이지에서 링크를 클릭한 경우, 데이터를 fetch 해온 후 영화 세부사항 보여주기

// app/(movies)/movies/[id]/page.tsx

async function getMovie(id: string) {
  console.log(`Fetching movie with id: ${Date.now()}`); // 소요 시간을 체크하기 위한 코드
  await new Promise((resolve) => setTimeout(resolve, 2000)); // 함수를 5초간 딜레이 하는 코드
  const response = await fetch(`${API_URL}/${id}`);
  return response.json();
}

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

export default async function MovieDetail({
  params: { id },
}: {
  params: { id: string };
}) {
  const movie = await getMovie(id);
  const videos = await getVideos(id);

  return (
    <div>
      <h1> {movie.title} </h1>
    </div>
  );
}

const movie = await getMovie(id);
const videos = await getVideos(id);

• 다음과 같이 코드를 작성하면, 자바스크립트는 위에 코드를 실행시키고 다음 코드를 실행시키기 때문에 동기적으로 실행시키기 때문에 두 데이터들을 모두 fetch 해오는데는 오랜 시간이 소요될 것임.
• 위 코드를 실행시킬 경우 출력되는 값들, 다음과 같이 시간차를 두며 데이터가 fetch됨.

📚 두 개의 데이터를 동시에 병렬적으로 fetch 해오는 방법 1. Promise.all

💡 Promise.all

// app/(movies)/movies/[id]/page.tsx

export default async function MovieDetail({
  params: { id },
}: {
  params: { id: string };
}) {
  const [movie, videos] = await Promise.all([getMovie(id), getVideos(id)]);
  return (
    <div>
      <h1> {movie.title} </h1>
    </div>
  );
}

• Promise.all 을 사용해주면 두 개의 데이터를 동시에 병렬적으로 fetch하기 시작한다.

📚 두 개의 데이터를 동시에 병렬적으로 fetch 해오는 방법 2. Suspense

💡 Promise.all 단점?

• 위 코드를 바탕으로 하면, getMovie(id), getVideos(id) 위 함수들이 데이터 fetch를 완료하기 전까지 UI(< h1 > {movie.title} < /h1 >)가 그려지지 않는다.
• 그러므로, 리액트에 Suspense, streaming 기능들을 사용해서, getMovie가 완료되면 해당 UI를 그려내고, getVideos가 완료되면 해당 UI를 그리도록 코드를 수정할 것임.

🗣️ 지금까지는 page 컴포넌트에서 두 개의 데이터들을 모두 fetch 해오고 있었음, 지금부터는 getMovie, getVideos를 각각의 파일에서 개별적으로 각각 render 하게끔 코드를 수정함.

// components/movie-videos.tsx
async function getVideos(id: string) {
  console.log(`Fetching movie with id: ${Date.now()}`);
  await new Promise((resolve) => setTimeout(resolve, 2000));
  const response = await fetch(`${API_URL}/${id}/videos`);
  return response.json();
}

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

// components/movie-infos.tsx
async function getMovie(id: string) {
  console.log(`Fetching movie with id: ${Date.now()}`);
  await new Promise((resolve) => setTimeout(resolve, 2000));
  const response = await fetch(`${API_URL}/${id}`);
  return response.json();
}

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

• 다음과 같이 page컴포넌트에서 관리하던 fetch 함수들을 각각의 컴포넌트 파일로 분리하여 관리.

// app/(movies)/movies/[id]/page.tsx
export default async function MovieDetail({
  params: { id },
}: {
  params: { id: string };
}) {
  return (
    <div>
      <Suspense fallback={<h1>Loading movie info</h1>}> 
        // fallback : 데이터가 fetch되는 도중에 그려지는 UI
        <MovieInfos id={id} />
      </Suspense>
      <Suspense fallback={<h1>Loading movie videos</h1>}>
        <MovieVideos id={id} />
      </Suspense>
    </div>
  );
}

• 그리고 페이지 컴포넌트에서는 각각의 개별 컴포넌트를 Suspense 키워드로 감싸줌.
  

• 결과 -> 다음과 같이 병렬적으로 두가지를 동시에 fetch 할 수 있고 하나의 요청이 완료되면 그 즉시 해당 컴포넌트가 render됨.
• Promise.all 과는 다르게 Suspense를 사용하면 구체적으로 페이지의 어느 부분이 로딩 상태여야 하는지를 명시해 줄 수 있다.