[살려주세요] NEXT.js / 리엑트쿼리 고수님들만

Question

혹시 AppRouter(13ver 이상) 에서 리엑트쿼리 서버에서 프리패치를 진행할때 HydrationBoundary 에 state값으로 dehydrate(queryClient) 하는걸로알고있습니다. 여기서 문제가 해당 레이아웃마다 HydrationBoundary 컴포넌트를 불러오지않고 전역으로 설정하고싶은데 13이하 버전는 공식문서에있던데 page.state 하면서 주입 .. AppRouter에서 전역으로 HydrationBoundary 를 설정하는법을 아시는 고수분 있을까요?

peace piece · Answer

저라면 page.tsx는 서버사이드 컴포넌트그리고 바로 하위에 container/index.tsx 를 클라이언트 사이드 컴포넌트로 가져가고react-query를 쓰고 있다면 intialState를 page.tsx에서 props로 내려주는 방식을 고민해볼 것 같습니다.```js// server side, page.tsxexport default async function Page(){ const [_erro, {data}] ?= await fetch("/foo"); return <Container apiResponse={data} />}``````js'use client'export default function Container({apiResponse}) { const res = useQuery({}, { initialState : apiResponse, disable: () => !!apiResponse }) // ...the rest of logic}```추가로 제 의견을 얘기하자면SEO에 대응 하기위해 클라이언트 컴포넌트에 합성 컴포넌트로 서버 사이드 컴포넌트를 넘겨서 SEO에 대응하실텐데 ex) export default function ClientComponent({children : serverConponentChildren}) {}이런 구조로 간다면 대부분의 경우 react-query를 클라이언트 사이드에서만 사용할 수 있지 않을까 생각합니당.*고수 아닙니다 주의..!

kiroki · Answer

// _app.tsx import { HydrationBoundary, QueryClient, QueryClientProvider, } from '@tanstack/react-query' export default function MyApp({ Component, pageProps }) { const [queryClient] = React.useState(() => new QueryClient()) return ( ) }서버에서 React Query prefetching 한 데이터 사용하기 (soobing.github.io)

아리까리 · Answer

이게 SPA가 아니라 server component 자체 에서는 props 주입을 제외하곤 다른 컴포넌트에 영향을 미치기가 어렵습니다.그게 부모 컴포넌트던 자식 컴포넌트던 HydrationBoundary를 layout.tsx, page.tsx 레벨에서 계속 쓰는 것을 추천 드립니다.실제로 방법이 없어요./** * @description * 이곳은 어떤 서버컴포넌트 파일입니다. */ // prefetchQuery를 래핑하여 공통화 시킨 상상의 함수 import { prefetchAndHydration } from '@/utils/tanstack-query' export default AboutLayout() { const { data } = prefetchAndHydration('list') // 고정된 key를 넣으면 동작하도록 작성 했다고 가정 return (

...components

) } 여기서 상상의 함수인 "prefetchAndHydration" 이 함수안에서뭔짓을 해도 next app의 전역 레벨로 상태를 전달 할 방법이 없습니다.그래서 HydrationBoundary를 page, layout 파일에서 필요할 때마다 반복적으로 쓸수 밖에 없습니다.

[살려주세요] NEXT.js / 리엑트쿼리 고수님들만

3개의 답변

#reactquery 목록