인프런 커뮤니티 질문&답변

안녕하세요 강사님! 이 강의 덕분에 Next를 기반으로 다양한 프로젝트들을 진행할 수 있게 됐습니다!

그러던 도중, 문득 강사님에게 배운 일부 내용에 대해 궁금한것이 추가적으로 생겨서 질문드립니다.

1. prefetchQuery를 하게 될 경우 그 원리가 궁금합니다

   export default async function TabDeciderSuspense() {
     const queryClient = new QueryClient();
     await queryClient.prefetchInfiniteQuery({
       queryKey: ['posts', 'recommends'],
       queryFn: getPostRecommends,
       initialPageParam: 0, 
     });
     const dehydreatedState = dehydrate(queryClient);
   
     return (
       <HydrationBoundary state={dehydreatedState}>
         <TabDecider />
       </HydrationBoundary>
     );
   }
   

   위 코드에서 HydrationBoundary 로 dehydreatedState를 넘겨주는 원리가

   • queryFn: getPostRecommends 를 통해 반환받은 값이 캐싱된 QueryClient인스턴스 자체를 클라이언트 컴포넌트로 넘겨주고 클라이언트 컴포넌트에서는 넘겨받은 QueryClient인스턴스에서 queryKey를 통해 캐싱 데이터를 바로 사용하는 것인가요?

   • 아니면 QueryClient 인스턴스 자체를 전송하는 것이 아니라, 인스턴스에 저장된 데이터와 상태 정보만(queryFn: getPostRecommends 반환값)클라이언트 사이드에서 사용할 수 있는 형태로 만든 뒤(=직렬화) 클라이언트 사이드에서 이 정보만 QueryClient(RQProvider.tsx에서 만든)에 적용하는 것인가요?

    

2. 다른 글을 보면 강사님께서 prefetchQuery를 사용한 이유가 해당 페이지에 왔을 때 미리 데이터를 불러와서 SEO 측면에서 유리함을 가져가기 위해서라고 하셨는데,
   prefetchQuery없이 서버 컴포넌트에서 fetch → 하위 클라이언트 컴포넌트에 props로 전달 하는 형태도 동일한 효과를 가져가는게 맞는것일까요?

3. 이 강의에서 진행했던, 서버 컴포넌트의 Suspense + 클라이언트 컴포넌트의 useSuspenseQuery 의 패턴을 적용할 때 발생하는 문제가 있습니다.
   

   
   (이 부분은 강사님의 코드가 아니라 저 혼자 이 강의를 토대로 직접 실습을 해보면서 맞닥뜨린 문제입니다.)
   
   

   현재 클라이언트 컴포넌트에서는 CORS대비 프록시를 사용하고 있습니다

   // next.config.js
     async rewrites() {
       return [
         {
           source: '/api/:path*',
           // 외부 백엔드 api로 프록시
           destination: `${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/:path*`,
         },
       ];
     },
   

   서버 컴포넌트에 Suspense를 걸어줍니다

   // page.tsx
   const page = ({ params }: PageProps) => {
     const slug = params.id;
     return (
       <div>
         <Suspense fallback={<Spinner />}>
           <EditPresentation slug={Number(slug)} />
         </Suspense>
       </div>
     );
   };
   

   클라이언트 컴포넌트에서 useSuspenseQuery를 사용합니다

   const EditPresentation = ({ slug }: EditPresentationProps) => {
     
     const { data: value } = useSuspenseQuery({
       queryKey: ['upload', slug],
       queryFn: async (presentationId: number) => {
       
                                    // 프록시 api
         const response = await fetch(`/api/presentations/${presentationId}`, {
           method: 'GET',
         });
   
         if (response.ok) return await response.json();
       },
     });
   
     return <>...</>;
   };
   
   export default EditPresentation;
   

   원래 이론대로라면 서버 컴포넌트의 <Suspense />에

   useSuspenseQuery의 queryFn이 걸려야 하는데, 브라우저 새로고침을 하게 되면 실행은 잘 되면서 동시에 아래의 에러가 발생합니다…

(제 생각은) 클라이언트 컴포넌트도 어쨌든 처음에 서버를 거치게 되는데, 아마 서버에서는 프록시를 사용한 api를 읽어내지 못해서 발생하는 문제 같긴 한데,,, 혹시 이런 경우에는 어떻게 처리하는게 좋을까요...ㅠ