/page.tsx

import Link from "next/link";

export const metadata = {
    title: "Home"
}

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

async function getMovies() {
    await new Promise((response) => setTimeout(response, 5000))
    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}`}>{movie.title}</Link>
                </li>
            ))}
        </div>
    )
}

/movies/[id]/page.tsx

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

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, videos] = await Promise.all([getMovie(id), getVideos(id)])
    return <h1>{movie.title}</h1>
}

Next.js 영화 상세 페이지 구현 및 데이터 페칭 최적화

1. 영화 목록 렌더링

• 영화 목록을 li 요소 내에 Link 컴포넌트로 렌더링
• Link의 주소를 movies/${movie.id}로 설정
• 각 Link에 고유한 key 부여
• Link 내부에 movie.title 표시

2. 영화 상세 페이지 구현

• movies 폴더 내 id 페이지 파일에서 컴포넌트를 async function으로 정의
• getMovie 함수 작성:
  • 파라미터: id (string)
  • API_URL을 사용하여 /:id 경로에서 데이터 페칭
  • response.json() 반환
• 영화 데이터를 가져와 UI에 movie.title 표시

3. 페칭 캐싱 및 로딩 시간 조절

• getMovie 페칭이 캐싱되어 동일한 요청 시 로딩 상태 발생하지 않음
• 로딩 시간을 테스트하기 위해 페칭 함수에 지연 시간(예: 10초) 설정
• 로딩 상태를 시각적으로 확인

4. 추가 데이터 페칭 구현

• 영화 예고편 데이터를 페칭하기 위해 getVideos 함수 작성:
  • getVideos는 /videos 경로에서 데이터 페칭