suspense Error

[bellmin9321]

에러내용

Error1: Hydration failed because the initial UI does not match what was rendered on the server.
Error2: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

해결 방법

queryClient.ts

import { QueryCache, QueryClient } from 'react-query';

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0,
      staleTime: 60000,
      suspense: true, <<<<<<<<<<<- 삭제
    },
  },
  }),
});

참고

• Suspense and Server-Side Rendering vercel/swr#1906
• https://nextjs.org/docs/messages/react-hydration-error