NextJs에서 react-query SSR 사용시 dehydratedstate error

yo_onms·2023년 9월 7일

NextJs

목록 보기

4/6

이전 글에 이어서 react-query를 도입하던중 ssr에서 데이터를 props로 내리던중

Server Error
Error: Error serializing .products.headers returned from getServerSideProps in "/products".
Reason: object ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types.

라는 오류가 떳다....
이러한 에러의 이유를 찾을려고 구글링을 하던중 github에서 열띈 토론이 일어나는곳을 찾았다.
https://github.com/TanStack/query/issues/1458

위의 글과 여러 블로그들을 참고 하여 원인은 2가지를 밝혀냈다.

1. 원인

getServerSideProps를 사용해 서버에서 클라이언트로 데이터를 props로 넘겨줄 때, props로 전달되는 값에 JSON으로 변환이 불가능한 것이 포함되어 있을 경우 해당 에러가 발생한다.
props로 넘겨주는 것은 AxiosResponse 타입 or Promise 객체가 아니라 해당 객체에서 data를 추출한 형태여야 한다.

그럼 해결 방법은 뭐가 있을까??

2. 해결 방법

개인적으로는 2가지 방법이 떠올랐다.

Api 통신후 data를 추출한 형태를 return 해주자.
JSON 형태로 강제 형변환을 해주자

위의 2가지 방법을 가지고 코드를 짜보자

1. Api 통신후 data를 추출한 형태를 return 해주자.

// 상품 조회하기 예시 코드
// pages/api.ts
export const getProducts = async () => {
  const res = await axios.get("http://api.test.com/products");

  return res.data; // data객체를 리턴
};

개인적으로는 이 방식이 제일 깔끔해서 대부분 에러를 해당 방식으로 해결했던거 같다.

2. JSON형태로 강제 형변환을 해주자

// 상품 조회하기 예시 코드
// pages/api.ts
export const getProducts = async () => {
  const res = await axios.get("http://api.test.com/products");

  return res;
};

// pages/products
export async function getServerSideProps() {
  const products = await getProducts();
  return { 
    props: {
        products: products,
        dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
      }, 
  };
}

위에 queryClient를 선언한 부분은 생략했습니다.
이렇게 queryClient자체를 형변환해서 보내주는 방식이 있는거 같다.
개인적으로 위의 방식이 안통했을때 아래의 방식을 이용하는게 좋을꺼 같다.
항상 내가 원하는 방식으로 데이터를 받을수 없으니 알아두는게 좋을꺼 같다.

이렇게 NextJs에서 SSR + react-query 조합에서의 serializing 에러를 해결하는 방법에 대해 알아봤습니다.

감사합니다.