return fetch(비동기 통신 라이브러리) 트러블 슈팅

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

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

‣

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);

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

해결: return fetch 라이브러리를 사용해서 인터셉터를 구현한 부분에서 문제발생

문제의 발단.

클라이언트 사이드에서 요청시 백엔드 주소를 감추기위해 rewrite를 사용했고.

위와같이 설정을 했습니다.

(/apis 로 설정한 이유)

하지만 returnFetch라이브러리에서 baseUrl을 ‘/apis’ 로 설정하니 해당 부분이 제거된 채로 요청이 가는 문제가 있었습니다.

ex) ‘/exmaple’ 로 요청을 보내는 상황일때 기대한 url→ ‘apis/example’‘ 실제 요청 url→ “/example”로 요청이 가는 문제.

baseUrl을 rootUrl이 포함된 ‘http://example 이런식으로 설정하니 정상적으로 url이 설정되는것을 확인했습니다.

내부적으로 baseUrl을 설정하는 부분에서 문자열 결합이 아니라 다른 방식을 사용하거나 예외처리를 한것같은데…

결국 baseUrl을 설정하는 부분을 구현했습니다.

서버 컴포넌트의 interceptor되는 부분에서 문제가 생긴것을 확인했고,

이유를 찾아보니 서버컴포넌트에서만 url객체로 값이 들어오기 때문이었다.

seach와 hash를 붙여줘야지 해당 url이 완성되고. 정상적으로 쿼리가 있는 url문자열이 반환된다.

클라이언트 컴포넌트에서는 전체 url이 문자열로 반환되고 해당 string을 그대로 반환해줘서 문제가 없었던것,

다음부터 그냥 axios를 쓰거나 fetch순정으로 쓰던지 아니면 서버패칭로직을 따로 분리해야겠다.

하나의 함수와 인터셉터로 처리하려하니깐 로직이 너무 커지고 예외상황이 많이 터지는 것 같음