[Nextjs] Next.js에서 fetch 활용 가이드: 클라이언트와 서버의 데이터 처리

Next.js에서 fetch 함수는 데이터를 클라이언트나 서버에서 가져오기 위해 사용됩니다. Next.js는 React 기반의 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다. 이 특성에 따라 fetch는 클라이언트와 서버 양쪽에서 사용할 수 있지만, 각 환경에서 동작 방식이 다릅니다.

---

1. 클라이언트 fetch

클라이언트에서는 브라우저의 기본 fetch API를 활용하여 데이터를 가져옵니다. 이는 React 컴포넌트의 useEffect나 이벤트 핸들러 내부에서 자주 사용됩ㄴ다.

import { useEffect, useState } from 'react'; 

export default function ClientFetch() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/...') // api url
      .then((res) => res.json())
      .then((data) => setData(data));
}, []);
  
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>

• 클라이언트에서 실행되며, 브라우저의 네트워크 요청을 사용합니다.
• API 호출 시 CORS 정책을 준수해야 합니다.
• 사용자와 상호작용 후 데이터를 동적으로 가져올 때 유용합니다.

---

2. 서버 fetch

Next.js의 서버 환경에서는 Node.js의 네이티브 환경에서 fetch가 동작합니다. 서버 컴포넌트나 API 라우트에서 사용할 수 있으며, 특히 SSR 및 SSG에서 많이 활용됩니다.

export async function getServerSideProps() {
  const res await fetch('...'); 
  const data = await res.json();
  
  return { props: { data } };
}

export default function ServerFetch ({ data }) {
  return <div>{JSON.stringify(data)}</div>;
}

• 서버에서 실행되며 클라이언트에 노출되지 않습니다.
• SSG(정적 생성)에서는 빌드 시 데이터를 가져오고, SSR에서는 요청마다 데이터를 가져옵니다.
• 백엔드 API 호출에 유리하며 CORS 이슈를 피할 수 있습니다.

---

3. Next.js와 fetch의 주요 활용 방식

• getServerSideProps: 요청마다 데이터를 서버에서 가져와 렌더링합니다.
• getStaticProps: 정적 빌드 시 데이터를 미리 가져옵니다.
• API Routes: Neext.js의 /api 경로를 통해 클라이언트와 서버 간 데이터를 주고받습니다.

export async function getStaticProps() {
  const res = await fetch('/...');
  const data = await res.json();
  
  return { props: { data } };
}

export default function StaticPage({data}) {
  return <div>{JSON.stringify(data)}</div>;
}

---

4. 주의 사항

• 환경 분리: fetch를 사용하는 위치가 클라이언트인지 서버인지에 따라 API 호출 방식과 효율성이 달라집니다.
• 절대 URL 사용: 서버사이드 코드에서는 절대 경로를 사용해야 정확한 API 호출이 가능합니다.
• 에러 처리: 항상 에러 핸들링 로직을 추가해 안정성을 확보해야 합니다.

try {
  const res = await fetch('/...');
  if(!res.ok) throw new Error('Error Message');
  const data = await res.json();
} catch(error) {
  console.error('Fetch Error: ', error);
}

---

요약

• 클라이언트와 서버 모두에서 fetch를 사용할 수 있으며 각 환경에 따라 데이터 가여오기 방식이 다릅니다.
• Next.js getServerSideProps와 getStaticProps를 통해 SSR/SSG에서 fetch를 쉽게 통합할 수 있습니다.
• API Routes를 사용하면 데이터를 보다 안전하고 효율적으로 관리할 수 있습니다.