axios 대신 fetch를 쓴 이유 — Next.js와 더 잘 맞는 선택이었다
분야
프로그래밍/소프트웨어 개발
대상자
Next.js 프로젝트 개발자, 서버 컴포넌트 및 API 요청 최적화에 관심 있는 개발자
난이도: 중급~고급
핵심 요약
- Next.js 13 이상에서 fetch는 서버 컴포넌트와 원활하게 통합되어 캐싱, revalidation, prefetch 최적화를 제공합니다.
- axios 대신 fetch + 유틸 함수로 단순한 요청 처리 시 번들 크기 감소와 설정 복잡성 회피가 가능합니다.
node-fetch
가 Next.js 내장 라이브러리로, 서버에서 실행 시 자동으로 요청 처리가 가능합니다.fetch(url, { cache: 'no-store' })
같은 세부 옵션은 Next.js에서 공식적으로 지원됩니다.
섹션별 세부 요약
- Next.js의 fetch 통합성
- Next.js 13 이상은 서버 컴포넌트에서 fetch 호출 시 자동 캐싱을 지원합니다.
node-fetch
가 내장되어 서버에서 요청 처리가 가능하며, 별도 라이브러리 설치 필요 없습니다.- 캐싱 및 revalidation 같은 최적화 기능을 fetch만으로 활용할 수 있습니다.
- axios의 기능 제한
- axios는 요청/응답 인터셉터, JSON 자동 직렬화, 타임아웃 등의 기능을 제공하지만, 복잡한 흐름이 필요 없는 단순 요청 시 불필요한 부담이 됩니다.
- 번들 크기 증가와 설정 과다로 인해 유지보수 어려움이 발생할 수 있습니다.
- customFetch 전략
- 필요한 기능만 직접 감싸서 사용하는 방식으로 axios의 단점을 회피합니다.
- 단순한 요청에 적합하며, Next.js의 내장 기능과 호환성을 높입니다.
fetch(url, { cache: 'no-store' })
같은 세부 옵션은 Next.js에서 공식 지원됩니다.
결론
- Next.js의 fetch 통합성을 활용하면 별도 라이브러리 없이도 캐싱, revalidation 등 최적화 기능을 사용할 수 있습니다.
- axios 대신 fetch + 유틸 함수로 단순한 요청 처리 시 번들 크기 감소와 설정 간소화가 가능합니다.
- Next.js 13 이상에서 fetch의 강력한 기능을 최대한 활용해 성능과 유지보수성을 동시에 확보하는 전략이 권장됩니다.