[Next.js] app router - 데이터 페칭

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
4.1) 앱 라우터의 데이터 페칭

 

Page Router의 데이터 페칭

Parge Router에서는 서버나 데이터베이스로부터 데이터를 페칭하기 위해서 특정 함수들을 사용했다.

(GetServerSideProps, GetStaticProps, GetStaticPath 등)

 

저 함수들에서 데이터를 받아서 page component에 데이터를 Props로 전달해주었다.

page router에서는 모든 컴포넌트가 클라이언트 컴포넌트 이기 때문에 page component 역시 브라우저에서 다시 실행되기 때문에 저러한 함수들을 page component에 작성할 수 없었다.

page router의 data fetching의 단점

페이지 컴포넌트에게만 데이터가 props로 전달되기 때문에 해당 데이터를 사용하는 자식 컴포넌트에게 props로 데이터를 모두 보내줘야하는 문제점이 있다.

 

하지만 App Router에서는 서버 컴포넌트가 추가되었기 때문에 위와 같은 문제를 해결할 수 있다.

App Router의 데이터 페칭

App Router에서는 서버 컴포넌트를 이용하여 page component에서도 데이터 페칭이 가능하다.

오직 서버에서만 실행되기 때문에 함수에 async 키워드를 붙이는게 가능한데, 따라서 컴포넌트 함수를 비동기 함수로 만들고 내부에서 await 키워드와 fetch 메서드를 통해 데이터를 불러올 수 있다.

export async function Page(props) {
	const data = await fetch('...');
    return <div>...</div>
}

 

이로써 page router에서 사용하던 GetServerSideProps, GetStaticProps, GetStaticPath 함수를 사용하지 않고도 데이터를 불러올 수 있게 된 것이다. 데이터를 필요로하는 컴포넌트에서 직접 데이터를 페칭해올 수 있기 때문에 props로 넘겨준다던가 그러지 않아도 괜찮다.

// 사용예시
async function AllBooks() {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERBER_URL}/book`
  );
  if (!response.ok) {
    return <div>오류가 발생했습니다 ...</div>;
  }

  const allBooks: BookData[] = await response.json();
  return (
    <div>
      {allBooks.map((book) => (
        <BookItem key={book.id} {...book} />
      ))}
    </div>
  );
}

import BookItem from "@/components/book-item";
import { BookData } from "@/types";

export default async function Page({
  searchParams,
}: {
  searchParams: { q?: string };
}) {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERBER_URL}/book/search?q=${searchParams.q}`
  );
  if (!response.ok) {
    return <div>오류가 발생했습니다 ...</div>;
  }

  const books: BookData[] = await response.json();

  return (
    <div>
      {books.map((book) => (
        <BookItem key={book.id} {...book} />
      ))}
    </div>
  );
}

import { BookData } from "@/types";
import style from "./page.module.css";

export default async function Page({
  params,
}: {
  params: { id: string | string[] };
}) {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERBER_URL}/book/${params.id}`
  );
  if (!response.ok) {
    return <div>오류가 발생했습니다 ...</div>;
  }

  const bookData: BookData = await response.json();

  const { title, subTitle, description, author, publisher, coverImgUrl } =
    bookData;

  return (
    <div className={style.container}>
      <div
        className={style.cover_img_container}
        style={{ backgroundImage: `url('${coverImgUrl}')` }}
      >
        <img src={coverImgUrl} />
      </div>
      <div className={style.title}>{title}</div>
      <div className={style.subTitle}>{subTitle}</div>
      <div className={style.author}>
        {author} | {publisher}
      </div>
      <div className={style.description}>{description}</div>
    </div>
  );
}