baseUrl 설정이나 기본 헤더 설정, 인터셉터 및 json 직렬화 등 의 불편함으로 axios를 사용하였었는데

nextjs에서 캐싱관련해서 fetch를 확장해서 제공해주기때문에

https://blog.deercorp.com/next-js-app-router-and-fetch-library/

https://www.npmjs.com/package/return-fetch?ref=blog.deering.co

fetch를 확장한, 해당 라이브러리를 사용하기로 했습니다.

하지만 문제가 발생했는데.

nextjs 14, 서버컴포넌트에서

아래처럼 요청을 보냈경우

백엔드 서버에서 확인했을때 쿼리스트링이 빠진 상태로 url이 도착함.

client req ⇒/buildings/1/rooms/1/yearly-score-interval-month?yearMonth=2024-06

server res ⇒ /buildings/1/rooms/1/yearly-score-interval-month

  const evaluationProgressUrl = `/buildings/1/rooms/1/yearly-score-interval-month?yearMonth=2024-06`;

  const fetchInstance = await baseApis();
  const response = await fetchInstance(evaluationProgressUrl, { cache: 'default', method: 'GET' });
  console.log('Request URL:', evaluationProgressUrl);

하지만 클라이언트 컴포넌트에서 완벽히 같은 주소와 로직으로 요청보냈을때는 값이 정상적으로 도착함