원글

https://velog.io/@myeongjae-kim/Next.js-v13-App-Router로-제품-만들기-fetch를-다루는-기술

Next.js는 2022년 10월 25일 컨퍼런스에서 app directory를 발표했습니다.  Next.js 서버쪽에서 캐싱 관련 기능을 fetch를 확장해서 제공하고 있고, fetch가 아닌 다른 라이브러리를 사용한다면 직접 캐싱 관련 설정을 해주어야 합니다.

fetch는 이런저런게 아쉬워요!

아래 항목들은 Axios에서 제공하지만 fetch에는 없어서 아쉽다고 느꼈던 기능들입니다.

1. baseUrl을 설정할 수 없다.
2. default header를 설정할 수 없다.
3. request, response interceptor가 없다.
4. json serialize, deserialize를 직접 해야 한다.

이렇게 해결할 수 있어요!

1. fetch-intercept

https://www.npmjs.com/package/fetch-intercept

fetch와 interceptor관련 내용으로 검색을 하면 가장 먼저 찾을 수 있는 라이브러리입니다. 하지만 baseUrl과 default headers 기능을 제공하지 않고 전역에 선언되어있는 fetch를 몽키패치 해버리기 때문에 이 라이브러리를 선택할 수는 없었습니다.

Next.js에서 fetch를 사용하는 3가지 맥락

Next.js에서는 fetch를 다양한 맥락에서 사용하게 됩니다. 제 멘탈 모델에서는 크게 3가지가 있습니다.