Next.js data fetching 하는 방법

공부 계기 📚

본격적인 프로젝트에 들어가기 앞서, next.js로 data feting하는 방법에 대해 공부해보자.

 

개념 📃

data를 Fetching하는 동안 화면에 아무것도 나오지 않기 때문에 Loading 페이지를 보여준다.

 

활용 예시 🪄

기존에 했던 data fetching 방식

"use client";

import { useEffect, useState } from "react";

export default function Page() {
  const [isLoading, setIsLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const response = await fetch(
      "https://nomad-movies.nomadcoders.workers.dev/movies"
    );
    console.log(response);
    const json = await response.json();
    setMovies(json);
    setIsLoading(false);
  };

  useEffect(() => {
    getMovies();
  }, []);

  return <div>{isLoading ? "Loading..." : JSON.stringify(movies)}</div>;
}

백엔드 개발자는 언제나 data를 클라이언트와 통신하기 위한 API를 만들어야 했다. 하지만 최신버전의 Next.js에서는 API가 필요 없다. 

 

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

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

async function getMovies() {
  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>;
}

이렇게 수정하여 작성할 수 있다. useState, useEffect를 사용하지 않아도 된다. 로딩 상태 역시 없어진다. 데이터가 바로 실행되기 때문이다. -> 이는 fetch된 데이터를 캐싱해주기 때문이다.

Network 탭에 가도 movies가 없는 것을 알 수 있다. 백엔드에서 가져오기 때문이다.

 

Suspense가 await의 역할을 해준다. Movieinfo가 완료 되든, MovieVideo가 완료되든 각각 데이터를 패칭해온다. 서로를 기다리지 않는 구조이기때문에 더욱 혁신적임. 

 

 

에러 핸들링

error.tsx 생성

"use client";

export default function ErrorOMG() {
  return <h2>lol something broke...</h2>;
}

이렇게 에러 페이지를 만들어 놓으면, 자식 요소에서 에러가 발생했을 때 해당 파일이 대신 뜬다.

 

단, 위의 에러파일은 movies/[id]에만 해당되어 나타난다.

 

오류 핸들링과 페이지 라우팅이 가장 쉬워진 것 같다.