1. App Router와 Fetch API

Next.js에서 제공하는 App Router는 기본적으로 Fetch API를 확장해서 제공합니다.

<aside>

1. 서버 컴포넌트의 자동 캐싱 제어

   • cache 옵션을 통해 Next.js Data Cache와 상호작용 설정

2. 태그 기반 캐시 관리

   • next.tags 옵션으로 캐시에 태그 지정
   • revalidateTag로 필요할 때 즉시 재검증 수행

3. 재검증 관리

   • next.revalidate 옵션으로 효율적인 캐시 수명 제어 </aside>

Axios와 같은 Fetch API 외 라이브러리로 데이터를 가져올 경우, 위 기능들을 직접 구현해야 합니다. 반면 Fetch API를 사용하면 기능적 통합, 서버 컴포넌트 호환성, 빌드 타임 최적화 등의 이점이 있습니다. 따라서 App Router 환경에서는 Fetch API를 기본으로 사용하고 필요한 Axios의 편의 기능을 추가 구현하는 것이 더 효율적이라고 판단했습니다.

2. return-fetch 라이브러리를 활용한 fetch 구현

Trablock 프로젝트에서 사용할 백엔드 API를 효율적으로 구현하기 위해 다음과 같은 기능와 조건을 가진 라이브러리가 필요했습니다.

<aside>

• baseUrl, headers 통합 관리
• requset, response interceptor 지원
• fetch 호환 인터페이스
• 서버 컴포넌트 호환
• 타입스크립트 지원
• 낮은 학습 곡선 </aside>

여러 라이브러리를 검토한 결과 후보로 ofetch와 return-fetch가 있었습니다.

<aside>

1. ofetch에 비해 가벼운 번들 크기 (6.5kB vs 733Byte, minified+gzipped)
2. 자체적으로 제공하는 상세 매뉴얼
3. 필수 기능만 제공되어 자유로운 커스텀 </aside>

자체적으로 제공하는 기능은 ofetch가 더 다양하지만 프로젝트에서 요구하는 기능이 많지 않고, 또한 필요한 기능을 직접 추가하고자 했기 때문에 위 근거를 통해 return-fetch를 선택했습니다.

프로젝트 API를 구축하며 추가하고자 한 기능이 5가지 있습니다.

<aside>

1. 요청 시 body 타입에 따른 Content-Type 자동 지정

   • 명시적으로 지정하지 않은 Content-Type에 대해 requset body에 따라 자동으로 설정

2. 요청 시 json 형식 body 자동 처리

   • json 형식 body에 대해 자동으로 문자열 변환

3. 응답 시 Content-Type에 따라 body 자동 처리

   • Content-Type에 따라 body 자동 변환

4. 각 Methods 래핑

   • GET, POST, PUT, PATCH, DELETE 별 사전 정의된 객체로 래핑

5. Fetch API Response 타입 제네릭 지원

   • Fetch API 응답 body에 대해 타입을 지정할 수 있도록 제네릭 추가 </aside>