[next] Data 요청, Next fetch API

NextJS

---

Next 13 Data fetching

next에서 외부의 데이터를 가져오는 방법은 크게 두 가지로 나뉩니다.

1. 클라이언트에서 fetching
2. 서버에서 fetching

 

1. 클라이언트에서 fetching

Client component에서는 아래와 같은 방식으로 데이터를 가져올 수 있습니다.

• useEffect를 활용한 브라우저 fetch 혹은 axios 패키지 사용
• vercel의 swr 패키지
• react-query 패키지

 

Client component에서 가져온 데이터는 서버로부터 응답받은 초기 HTML에 포함되지 않기 때문에 SSR에 해당되지 않습니다. next에서 클라이언트 사이드의 fetching은 주로 다음과 같은 상황에서 필요합니다.

• 초기 렌더링 이후 추가 Data가 필요할 때
• 실시간 통신
• 클라이언트 사이드의 유저 인증(authentication)

클라이언트에서의 fetching은 아래 잘 설명된 useEffect 글을 참고해 주세요. 이 글에서는 서버 사이드의 fetching에 대해 살펴보겠습니다.

 

React useEffect, fetch

[React]useEffect와 fetch함수를 이용한 API호출

 

 

2. 서버에서 fetching

Server component에서 data 요청 및 응답을 완료환 후 최종 HTML을 생성하여 클라이언트로 전송합니다.

위에서 말씀드린 클라이언트 사이드 fetching이 꼭 필요한 경우가 아니라면, Next에서의 데이터 요청은 서버에서 수행하는 것이 좋습니다.

https://nextjs.org/docs/app/building-your-application/data-fetching/patterns

Data Fetching: Data Fetching Patterns and Best Practices | Next.js

 

1) fetch 사용(Restful API)

Server component에서 next의 fetch API를 사용합니다. (브라우저의 fetch API와 다릅니다.)

async, await을 활용하여 구현할 수 있습니다.

export default async function Home() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  if (response.ok) {
    const responseData = await response.json();
    console.log("responseData", responseData);
  } else {
    throw new Error("Data fetching error");
  }
  return <div>Home</div>;
}

fetch 데이터 출력결과

 

responseData는 서버에서 요청하고 출력했기 때문에 서버의 콘솔에 출력되며, 당연히 브라우저의 개발자 도구에는 출력되지 않습니다.

 

next fetch API는 동일한 url, options으로 요청한 내역을 라우팅 기준으로 메모리에 저장하여 재사용합니다(캐싱). 즉, 특정 페이지 렌더링을 위해 여러 서버 컴포넌트에서 동일한 데이터를 요청하는 경우에 실제로는 데이터베이스에 1개의 요청만 도달합니다.

 

cache의 options에 관한 설명은 아래 문서를 참고해 주세요.

https://nextjs.org/docs/app/building-your-application/caching#fetch-optionscache

Building Your Application: Caching | Next.js

 

이 caching이 동작하는 방식으로 인해 next의 디자인 패턴이 React의 패턴과 크게 달라집니다.

React에서는 여러 컴포넌트에서 사용되는 데이터를 가져오는 경우에 요청을 최소화하기 위해 다음과 같은 로직이 수행됩니다.

1. 상위 컴포넌트에서 데이터를 읽습니다.
2. 이 데이터를 props를 통해 하위컴포넌트로 전달하거나
3. react context, redux 등을 활용하여 전달합니다.

그러나 next fetch API에서는 라우팅 단위로 모든 데이터 응답이 캐싱되기 때문에 요청의 중복을 걱정하지 않아도 됩니다. 따라서 react에서와 같이 데이터를 가져오는 컴포넌트를 결정하거나, 글로벌 state의 관리에 대해 고민하지 않고, 필요한 컴포넌트에서 자유롭게 요청을 보내기만 하면 됩니다.

 

2) third-party 패키지 사용. (Restful API를 사용할 수 없는 경우)

next fetch API와 비슷한 방식으로 사용할 수 있습니다.

단, fetch는 url과 options에 따라 자동으로 캐싱되지만 third-party 패키지를 사용하는 경우에는 cache 작업을 따로 추가해주어야 합니다.

 

이를 위해서 React의 cache function을 사용해 줍니다.

import React from "react";

const getData = React.cache(async (a1: string) => {
  try {
    const datas = await db.collection("collection").doc(a1).get();
    return datas;
  } catch (error) {
    throw new Error("Data fetching error");
  }
});

export default async function Home() {
  const datas = await getData("a1");
  console.log("datas", datas);
  return <div>Home</div>;
}

 

 

async 함수 getDatas를 React cache로 감싸서 캐싱 기능을 추가해 준 코드입니다. 이렇게 하면 fetchAPI를 사용하는 것과 비슷한 효과를 누릴 수 있습니다.