페이지네이션 랜더링 질문
447
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답변 1
0
지금도 처음 데이터는 SSR로 받아오고 있지 않나요? 그걸 그대로 하이드레이션해서 클라이언트가 받은 뒤에 그 다음부터는 클라이언트에서 더 불러올텐데요?
0
1페이지를 서버에서 받아오고 2페이지로 이동후 새로고침 을 했을때 캐싱된 데이터와 맞지 않는다는 오류가 나고 있어서요. 서버에서의 쿼리키와 클라이언트 에서의 쿼리키를 다르게 했는데 이부분이 문제일까요?
0
그렇게 되면 페이지이동시 서버에서도 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 로만 구현을 하는게 낫지않을까 생각이 드는데... 제로초님은 이런 상황에서 어떻게 처리하시나요?
0
아뇨 쿼리 키가 다르다고 해서 클라이언트와 서버에서 둘 다 호출하는 게 아닙니다. 서버에서 데이터를 받아왔는데 클라이언트에서 다시 날리는 경우는 데이터가 stale 되었거나 그런 때뿐입니다. 리액트 쿼리 데브툴즈로 분석 한 번 해보시겠어요? apiSkip=true 이런 거 원래 필요 없습니다.
일렉트론으로 앱을 하나 만들었는데
0
295
0
속았어요 ㅠㅠ, 왕초보인데, gui 이었으면..
0
395
0
비전공 국비수료생이 볼 수 있을까요?
0
391
1
로드맵으로 프론트엔드 전향이 가능할까요?
0
413
1
요즘시장에 MERN스택으로 개발하는 프로젝트가 많이 있는지 궁금합니다.
0
457
1
서버공부 (Java spring)
0
436
0
신규 강의가 비슷하게 나왔던데
0
432
0
다이아그램 자료 안뜨는데요.
0
426
0
업데이트로 인해, Adroid 설정부분이 조금 다릅니다.
1
444
1
선생님.. 구현하고자 하는게 있는데 도저히 구글링해도 어떻게 손을 봐야할지 모르겠습니다..
0
529
2
_song.html 세션 문제?
0
508
2
안녕하세용 강의관련해서 질문드립니다!
0
435
1