[NextJS] 데이터 페칭과 최적화: fetch, Promise.all

Next.js의 fetch API 확장

• Next.js는 기본 fetch() API를 확장하여 서버의 각 요청이 자체 영구적인 캐싱 설정을 할 수 있도록 한다.
• 서버 측에서 데이터를 가져올 때 캐싱 전략을 설정하여 성능을 최적화하고 중복된 네트워크 요청을 피할 수 있다.

export const API_URL = "https://nomad-movies.nomadcoders.workers.dev/movies";

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}`}>{movie.title}</Link>
        </li>
      ))}
    </div>
  );
}

 

 

 

fetch 최적화

Promise.all()

: 자바스크립트에서 여러 비동기 작업을 병렬로 실행하고, 모든 작업이 완료되면 그 결과를 배열 형태로 반환하는 기능

• 여러 개의 fetch 요청을 동시에 실행하고, 모든 요청이 완료되었을 때 데이터를 한꺼번에 사용할 수 있다.

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

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

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

 

---

 

Functions: fetch | Next.js

 

All Courses – 노마드 코더 Nomad Coders