nextjs 에서 cms 페이지 게시판 목록을 구현하고 있는데
처음 렌더링 시에만 서버에서 데이터를 받아오고 그다음 페이지 부터는 클라이언트에서 받아오게 짜려고 합니다.
페이지네이션 구조는 offset=0&limit=10 형식이고 클라이언트에서는 react-query 로 저장을 하는데
여기서 어떤 플래그를 세워 처음에만 ssr 을 시켜야할지 모르겠어요.
const GreetingListPageServer = async ({ searchParams } : SERVER_LIST_INTER_FACE) => {
const {
offset = "0",
limit = "10",
...rest
} = searchParams;
await queryClient_server.prefetchQuery({
queryKey : ["listSSR", "greeting"],
queryFn : () => API_SERVER_GREETING_LIST({offset, limit, ...rest}),
});
const dehydratedState = dehydrate(queryClient_server);
return (
<HydrationBoundary state={dehydratedState}>
<GreetingListPageClient page={offset}/>
</HydrationBoundary>
)
}
export default GreetingListPageServer
지금도 처음 데이터는 SSR로 받아오고 있지 않나요? 그걸 그대로 하이드레이션해서 클라이언트가 받은 뒤에 그 다음부터는 클라이언트에서 더 불러올텐데요?
답글
박수현
2025.04.181페이지를 서버에서 받아오고 2페이지로 이동후 새로고침 을 했을때 캐싱된 데이터와 맞지 않는다는 오류가 나고 있어서요. 서버에서의 쿼리키와 클라이언트 에서의 쿼리키를 다르게 했는데 이부분이 문제일까요?
제로초(조현영)
2025.04.18쿼리키에 searchParams도 같이 넣어서 페이지별로 캐싱을 다르게 하셔야할 거 같아요. 서버랑 클라랑 쿼리키가 같을 필요는 없습니다.
박수현
2025.04.18그렇게 되면 페이지이동시 서버에서도 api 를 호출 하고 클라이언트에서도 api 호출 하지않나요? 현재 클라이언트에서는
const key = searchParams.toString(); const { LoadingElement } = useLoadingView(); const queryConfig : UseQueryOptions = { queryKey: ["greeting-data-list", key], queryFn: Setup, staleTime : Infinity, }이런 식으로 하고있는데 서버에서도 같은 방식을 하면 페이지 이동할때마다 서버와 클라이언트 동시에 api 호출이 이루어 져서 서버 api 호출을 첫번째 이후 어떻게 막을지 막막하네요. searchParams 에 apiSkip=true 추가해서 서버 api 호출을 막으려고 하면 그이후에는 계속 클라이언트 랜더링 만 하다 보니... 이런 경우 csr 로만 구현을 하는게 낫지않을까 생각이 드는데... 제로초님은 이런 상황에서 어떻게 처리하시나요?
제로초(조현영)
2025.04.18아뇨 쿼리 키가 다르다고 해서 클라이언트와 서버에서 둘 다 호출하는 게 아닙니다. 서버에서 데이터를 받아왔는데 클라이언트에서 다시 날리는 경우는 데이터가 stale 되었거나 그런 때뿐입니다. 리액트 쿼리 데브툴즈로 분석 한 번 해보시겠어요? apiSkip=true 이런 거 원래 필요 없습니다.