[React] Promise.all() , Suspense | 여러 비동기 함수 최적화

기존 코드

• 비동기적으로 getMovie 함수가 실행되고 완료 후,  getVideo 함수 실행
• => 데이터 양이 많을 경우 비효율적

async function getMovie(id: string) {
  const response = await fetch(`${API_URL}/${id}`);
  return response.json();
}

async function getVideos(id: string) {
  const response = await fetch(`${API_URL}/${id}/videos`);
  return response.json();
}

//dynamic route
export default async function MovieDetail({ params: { id } }: { params: { id: string } }) {
  const movie = await getMovie(id);
  const video = await getVideos(id);

  return <h1>{movie.title}</h1>;
}

 

 

1 차 최적화 : Promise.all() 

• 비동기 함수 두개 동시에 호출 -> 결과값을 array에 각각 담아 반환
• 병렬 fetch => but. 두 함수 가 모두 끝날 때 까지 기다려야함

async function getMovie(id: string) {
  const response = await fetch(`${API_URL}/${id}`);
  return response.json();
}

async function getVideos(id: string) {
  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 video = await getVideos(id);
  const [movie, video] = await Promise.all([getMovie(id), getVideos(id)]);

  return <h1>{movie.title}</h1>;
}

 

2차 최적화 : Suspense

• 1차 최적화로 동시에 함수 실행 -> 먼저 끝난 함수부터 render
• Suspense 사용을 위해, 각각의 함수를 component로 나누고 suspense로 감싼다
• fallback prop of Suspense : component가 await 되는 동안 표시될 (loading) 메세지 render 

// movie-info.tsx

async function getMovie(id: string) {
  const response = await fetch(`${API_URL}/${id}`);
  return response.json();
}

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

//movie-video.tsx

async function getVideos(id: string) {
  const response = await fetch(`${API_URL}/${id}/videos`);
  return response.json();
}

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

// page.tsx

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>
  );

(코드 출처 : nomad corder)