SSR 쓰잖아? 그럼 데이터도 SSR 해야지 (prefetching, hydration, dehydrate)
App router에서 TQ로 Prefetching하기
Prefetching : 데이터를 client에서 패칭하는게 아닌 server에서 패칭하는것 SSR VS CSR에서로 설명하자면 2단계에 데이터를 패칭하는 것임
원리는 client에서 데이터를 호출하는게 아닌 server에서 데이터를 미리 호출하고 client에게 보내줄 때 hydration 하는 것이다.
이를 위해 HydrationBoundary와 dehydrate, prefetchQuery을 이용해서 할 수 있다.
이거를 이해 하기 위해서는 먼저 hydration과 prefetching 개념을 이해해야 한다.
dehydrate : 나중에 hydrate로 공급할 cache에 대해 미리 생성한 표현
hydrate: dehydrate된 cache에 서버 데이터에서 가져온 값을 추가해줌. (즉, server, client 동기화)
이제 큰 흐름을 보면
- 현재 queryclient를 가져오고 dehydrate된 값을 바라보고
- prefetchQuery로 HydrationBoundary안에서 SSR로 가져올 데이터를 지정한다
- 데이터를 가져왔을 시 HydrationBoundary 안에 데이터를 넣어준다.
이를 코드로 옮기면
// app/posts/page.jsx
import {
dehydrate,
HydrationBoundary,
QueryClient,
} from "@tanstack/react-query";
import Posts from "./posts";
export default async function PostsPage() {
const queryClient = useQueryClient(); // QueryClient를 가져오고
// prefetch으로 데이터를 미리 가져온 후
await queryClient.prefetchQuery({
queryKey: ["posts"],
queryFn: getPosts,
});
return (
// Suspanse처럼 HydrationBoundary는
// children의 데이터 패칭 부분을 prefetching 후 hydreate해서 렌더링한다.
<HydrationBoundary state={dehydrate(queryClient)}>
<Posts />
</HydrationBoundary>
);
}
프리패칭 했을 때 장점이 뭔데??
서버에서 데이터를 미리 패칭하고 HTML을 만들어서 내려주니깐 유저 입장에서 데이터가 차있는 화면을 볼 수 있다! (하지만 인터렉션은 못하쥬?)
프리패칭 했을 때 단점은 뭔데?
프리 패칭은 서버컴포넌트에서 데이터를 가져온다
⇒ 이 말은 2단계에서 데이터 패칭이 일어나고 2단계의 시간이 늘어난다는 뜻이다.
⇒ 그럼 데이터 불러오는 시간이 기면 그만큼 빈 화면 보는시간이 길어진다.
⇒ 근데 TQ로 한다면? QueryClient 생성 비용(불필요한 오버헤드)발생함ㅎ…
댓글남기기