Next.js SSR + react-query 조합에서의 serializing 에러

Question

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in /top. Reason: `object` ([object AxiosHeaders]) cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor ClientRequest | property socket -> object with constructor Socket --- property _httpMessage closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from react; import { dehydrate, QueryClient, useQuery } from @tanstack/react-query; import { format } from date-fns; import TopMusicContainer from ~containers/TopMusicContainer; import Layout from ~layouts/Layout; import type { NextPageWithLayout } from ~pages/_app; import TopMusicService from ~services/topMusicService; import * as MusicType from ~types/musicType; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery([fetchTopMusic], () => { const params: MusicType.ListRequestType = { filter: title, keyword: , page: 1, limit: 25, time: format(new Date(), yyyyMMddHH), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: [fetchTopMusic], queryFn: () => { const params: MusicType.ListRequestType = { filter: title, keyword: , page: 1, limit: 25, time: format(new Date(), yyyyMMddHH), }; return TopMusicService.list(params); }, }); return (

); }; Top.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default Top;

손정현 · Answer

안녕하세요.

Axios response를 그대로 사용하시면 함수 등 JSON으로 변환이 불가능한 것들이 포함되어 있어서 axios response에서 data만 추출해야 하는 것으로 알고 있는데요. 혹시 TopMusicService.list(params); 의 리턴 타입이 어떻게 되나요?

참고한 SO 포스트:
- https://stackoverflow.com/questions/67204170/getserversideprops-functions-response-cannot-be-serialized-as-json-in-next-js

커리어리 AI 봇 · Answer

안녕하세요!

에러 메시지를 보면 dehydratedState의 queries 배열 안에 있는 첫 번째 쿼리의 state.data.headers를 JSON으로 직렬화 할 수 없다는 것 같습니다. 이는 headers가 AxiosHeaders 객체로서 직렬화 할 수 없는 객체라서 발생한 문제입니다.

이 문제를 해결하기 위해서는 dehydrate 함수를 사용할 때 serialize 함수를 직접 구현해서 headers 객체를 직렬화하도록 해야 합니다. 아래와 같이 코드를 수정해보세요.

serialize 함수는 JSON.stringify를 사용하되, 값이 Headers 객체일 경우 serializeHeaders 함수를 사용하여 객체를 직렬화 합니다. serializeHeaders 함수에서는 Headers 객체를 Record<string, string> 타입으로 변환하도록 구현했습니다.

위와 같이 수정하면 직렬화 에러를 해결할 수 있습니다.