Next.js에서 axios 대신 fetch API를 커스텀하여 사용하는 이유와 장점

핵심 기술

Next.js 환경에서 외부 라이브러리(axios) 대신 내장된 fetch API를 직접 감싸서 customFetch로 사용하는 방식을 제안하며, 이를 통해 Next.js의 강력한 캐싱 및 최적화 기능을 최대한 활용하는 것이 핵심입니다.

기술적 세부사항

• Next.js와 fetch의 긴밀한 통합: Next.js는 node-fetch를 내장하고 있어 서버 사이드 렌더링(SSR) 및 API 요청에 fetch를 활용하기 용이합니다.
• 서버 컴포넌트에서의 자동 캐싱: Next.js 13 이상(App Router)에서는 서버 컴포넌트 내 fetch 호출 시 결과가 자동으로 캐싱됩니다.
• 세부 캐싱 옵션 지원: fetch는 cache: 'no-store'와 같은 옵션을 통해 캐싱 동작을 제어할 수 있습니다.
• 기존 라이브러리 기능 대체: axios의 인터셉터, 자동 JSON 직렬화, 타임아웃, 취소 토큰 등의 기능은 fetch와 유틸리티 함수 조합으로 구현 가능합니다.
• 번들 크기 및 설정 간소화: 외부 라이브러리 의존성을 줄여 번들 크기를 최적화하고, 설정 복잡성을 낮춥니다.

개발 임팩트

• Next.js의 내장 기능을 활용하여 API 통신 로직을 최적화하고 성능을 개선할 수 있습니다.
• 서버 컴포넌트의 캐싱 메커니즘을 효과적으로 사용하여 데이터 로딩 속도를 향상시킬 수 있습니다.
• 프로젝트의 의존성을 줄여 유지보수성을 높이고 잠재적인 충돌 가능성을 낮춥니다.

커뮤니티 반응

(해당 내용 없음)

톤앤매너

개발자에게 실질적인 기술 선택의 이유와 그에 따른 이점을 명확하게 전달하는 전문적이고 실용적인 톤을 유지합니다.