--db457b9e37a27573 x-next-cache-tags: _N_T_/layout,_N_T_/blog/layout,_N_T_/blog/[...slug]/layout,_N_T_/blog/[...slug]/page,_N_T_/blog/fetch%EA%B0%80-next.js%EC%97%90%EC%84%9C-%EC%84%A0%ED%98%B8%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%B0%A8%EC%9D%B4%EC%A0%90 vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch fetch가 Next.js에서 선호되는 이유 그리고 차이점 등 서술 해보기 | Hyo814`s Blog
Published on

fetch가 Next.js에서 선호되는 이유 그리고 차이점 등 서술 해보기

Authors
  • avatar
    Name
    Hyo814
    Twitter

1. fetch가 Next.js에서 선호되는 이유

a. 기본 내장 API

  • fetch는 브라우저와 Node.js 환경에서 기본적으로 제공되는 API입니다. Next.js는 브라우저와 서버(SSR) 모두에서 작동하기 때문에, 추가적인 패키지 설치 없이 바로 사용 가능한 fetch를 선호합니다.

b. SSR 환경과 호환성

  • Next.js는 서버 측에서 데이터를 가져오는 기능(예: getServerSideProps, getStaticProps)을 지원합니다. fetch는 브라우저와 서버 환경 모두에서 동일한 방식으로 작동하기 때문에 Next.js의 SSR/SSG와 잘 통합됩니다.

c. 번들 크기 감소

  • axios를 사용하면 프로젝트 번들 크기가 커질 수 있습니다. fetch는 내장 API이기 때문에 번들 크기에 영향을 주지 않아 더 가벼운 애플리케이션을 만들 수 있습니다.

d. 표준화된 API

  • fetch는 JavaScript의 표준 API로, 최신 브라우저와 Node.js 환경에서 기본적으로 지원됩니다. 표준을 따르는 것은 장기적인 유지보수성과 호환성 측면에서 유리합니다.

2. fetch와 axios의 주요 차이점

a. 기본 제공 여부

  • fetch: 브라우저 및 Node.js에 내장된 API.
  • axios: 외부 라이브러리로 설치(npm install axios) 필요.

b. 데이터 처리 방식

  • fetch:
    • fetch는 응답을 JSON으로 자동 변환하지 않습니다. 응답 데이터를 처리하려면 .json() 메서드를 호출해야 합니다.
      const response = await fetch('/api/data')
const data = await response.json()
  • axios:
    • axios는 응답 데이터를 자동으로 JSON으로 변환합니다.
      const { data } = await axios.get('/api/data')

c. HTTP 오류 처리

  • fetch:
    • HTTP 오류(예: 404, 500)가 발생해도 Promise가 reject되지 않습니다. 응답 객체의 ok 속성을 확인해야 합니다.
      const response = await fetch('/api/data')
if (!response.ok) {
  throw new Error('HTTP error: ' + response.status)
}
const data = await response.json()
  • axios:
    • HTTP 오류가 발생하면 Promise가 자동으로 reject됩니다.
      try {
  const { data } = await axios.get('/api/data')
} catch (error) {
  console.error(error.message)
}

d. 기능 확장

  • axios:
    • 기본적으로 요청 취소, 요청 및 응답 인터셉터, 기본 헤더 설정 등 추가 기능 제공.
    • 복잡한 API 클라이언트 구축에 더 적합.
  • fetch:
    • 이런 기능을 사용하려면 직접 구현하거나 추가 라이브러리가 필요.

e. 브라우저 호환성

  • fetch:
    • 구형 브라우저(예: IE11)에서는 폴리필이 필요.
  • axios:
    • 구형 브라우저에서도 더 나은 지원 제공.

3. 언제 axios를 사용하는 것이 더 나을까?

  • 복잡한 요청 흐름: 요청 취소 기능(CancelToken), 응답/요청 인터셉터 사용이 필요한 경우.
  • 구형 브라우저 지원 필요: IE11 같은 구형 브라우저에서 작동해야 한다면, axios가 더 적합.
  • 반복되는 설정: 기본 URL, 헤더 설정이 자주 필요할 경우 axios가 더 편리.

4. 결론

  • Next.js에서는 fetch가 기본적이고 효율적인 선택:
    • 내장 API로 번들 크기를 줄이고, SSR/SSG와 자연스럽게 통합되며, Node.js와 브라우저 환경 모두에서 표준적으로 작동하기 때문.
  • 그러나 복잡한 HTTP 요청 로직이 필요하거나 기능 확장이 필요한 경우에는 axios를 고려할 수 있습니다.
--db457b9e37a27573--