/components/movie-info.tsx

const API_URL = "<https://nomad-movies.nomadcoders.workers.dev/movies>"

async function getMovie(id: string) {
    await new Promise((response) => setTimeout(response, 3000))
    const response = await fetch(`${API_URL}/${id}`)
    return response.json()
}

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

/components/movie-videos.tsx

const API_URL = "<https://nomad-movies.nomadcoders.workers.dev/movies>"

async function getVideos(id: string) {
    await new Promise((response) => setTimeout(response, 5000))
    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>
}

/movies/[id]/page.tsx

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

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 video</h1>}>
            <MovieVideos id={id} />
        </Suspense>
    </div>
}

Next.js 영화 상세 페이지 구현 및 React Suspense를 활용한 데이터 페칭 최적화

1. 병렬 데이터 페칭의 장점

• Promise 병렬 실행: Promise.all을 사용하여 여러 데이터 페칭 함수를 동시에 시작함으로써 전체 페칭 시간을 단축함.
• 비순차적 실행: 병렬 실행 덕분에 페칭 시간이 줄어들고, 순차적으로 실행될 때보다 성능이 향상됨.

2. 데이터 페칭의 문제점

• 동시 완료 필요성: 영화 제목과 관련 비디오 데이터를 동시에 가져와야 UI를 제대로 렌더링할 수 있음.
• UI 대기 상태: 두 가지 데이터 페칭이 모두 완료될 때까지 사용자는 아무것도 볼 수 없어 사용자 경험이 저하됨.

3. 페칭 함수 분리 및 컴포넌트화

• 컴포넌트 분리: MovieInfo와 MovieVideos라는 두 개의 별도 컴포넌트를 생성하여 각기 다른 데이터 소스를 페칭함.
  • MovieInfo 컴포넌트:
    • async function으로 정의
    • 영화 정보 데이터를 페칭 (getMovie 함수 사용)
    • movie.title을 UI에 표시
  • MovieVideos 컴포넌트:
    • async function으로 정의
    • 영화 관련 비디오 데이터를 페칭 (getVideos 함수 사용)
    • 비디오 데이터를 JSON.stringify로 표시

4. React Suspense 도입

• Suspense 컴포넌트 사용: React의 Suspense 컴포넌트를 사용하여 각 데이터 페칭 컴포넌트의 로딩 상태를 개별적으로 관리함.
  • fallback 속성: 컴포넌트가 로딩 중일 때 표시할 대체 UI를 설정함.
  • 독립적 로딩 표시: MovieInfo와 MovieVideos 각각에 대해 별도의 로딩 상태를 표시하여 사용자에게 즉각적인 피드백을 제공함.