DATA FETCHING

1. 기본적으로 nextjs는 server side에서 작동하기 때문에 데이터 호출을 백엔드에서 해온다.

따라서, react 처럼 useState나 useEffect를 사용하지 않아도 된다.

 

아래와 같이 가져올 수 있다. 해당 예제에서는 api주소를 입력해서 가져오는데, 본인 db가 있다면 다이렉트로 db에 호출해서 가져 올 수 있다. (로직은 같음)

export const metadata = {
  title: "Home",
};

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

async function getMovies() {
  await new Promise((resolve) => setTimeout(resolve, 5000));
  const response = await fetch(URL);
  const json = await response.json();
  return json;
}

export default async function HomePage() {
  const movies = await getMovies();
  return <div>{JSON.stringify(movies)}</div>;
}

 

2. 위 예제에서 5초의 로딩시간을 두었다. 로딩을 화면에 구현하기 위해서는 해당 폴더에 loading파일을 생성하면 된다.

(백엔드 응답  -> 로딩 화면 -> 로딩이 완료되면 html 뿌려줌)

 

3. Parellel Requests는 한 화면에서 동시에 여러곳에서 데이터를 fetch하는 경우에 쓰일 수 있다.

1번 데이터가 5초, 2번 데이터가 5초 걸리면 순차적으로 하면 10초 걸리는데 이걸 한번에 하기 위해서는

 

  const [movie, videos] = await Promise.all([getMovie(id), getVideos(id)]); 와 같이 병렬로 처리해주면 된다.

 

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

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

async function getVideos(id: string) {
  console.log(`Fetching videos: ${Date.now()}`);
  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 };
}) {
  console.log("===========");
  console.log("start fetching");
  const [movie, videos] = await Promise.all([getMovie(id), getVideos(id)]);
  console.log("end fetching");
  return <h1>{movie.title}</h1>;
}

 

4. 위와 같은 방법을 사용하면 각 화면에 대한 로딩화면을 구현하기 어렵다., suspense를 통해 각 데이터마다 로딩상태를 화면에 보여줄 수 있다.suspense fallback 부분을 통해 각 데이터 별 로딩 내용 화면에 보여줌.

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

export default async function MovieDetail({
  params: { id },
}: {
  params: { id: string };
}) {
  return (
    <div>
      <h3>Movie detail page</h3>
      <Suspense fallback={<h1>Loading movie info</h1>}>
        <MovieInfo id={id} />
      </Suspense>
      <Suspense fallback={<h1>Loading movie videos</h1>}>
        <MovieVideos id={id} />
      </Suspense>
    </div>
  );
}

 

5. data fetch시 에러가 날 때, 해당 화면을 구현해주기 위해서는 error파일을 해당 폴더에 생성해주고 꾸며주면 된다.