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 호출 하지않나요? 현재 클라이언트에서는
이런 식으로 하고있는데 서버에서도 같은 방식을 하면 페이지 이동할때마다 서버와 클라이언트 동시에 api 호출이 이루어 져서 서버 api 호출을 첫번째 이후 어떻게 막을지 막막하네요. searchParams 에 apiSkip=true 추가해서 서버 api 호출을 막으려고 하면 그이후에는 계속 클라이언트 랜더링 만 하다 보니... 이런 경우 csr 로만 구현을 하는게 낫지않을까 생각이 드는데... 제로초님은 이런 상황에서 어떻게 처리하시나요?
제로초(조현영)
2025.04.18아뇨 쿼리 키가 다르다고 해서 클라이언트와 서버에서 둘 다 호출하는 게 아닙니다. 서버에서 데이터를 받아왔는데 클라이언트에서 다시 날리는 경우는 데이터가 stale 되었거나 그런 때뿐입니다. 리액트 쿼리 데브툴즈로 분석 한 번 해보시겠어요? apiSkip=true 이런 거 원래 필요 없습니다.