next.js 의 pages router 기준으로 작성되었어요.

next.js서버사이드에서 데이터를 prefetch하기 위해서 리액트쿼리에서 제안하는 방식은 크게 두가지가 존재한다.

1. 데이터 패칭을 한 뒤에 serverSideProps의 props로 넘겨주는 방식

2. 서버사이드에서 queryClient에 데이터를 저장하고, queryClient자체를 dehydrate하여 넘겨주는 Hydration 방식

첫번째 방식은 비교적 간단하지만 props drilling이나 여러곳에서 사용할 경우 initialData를 넣어주는 것이 까다롭다는 단점이 있다.

때문에 프리패칭하는 데이터가 여러곳에 존재하고, 복잡할 경우 두번째 방식을 사용하는 것이 좋을것이다.

Hydration방식을 사용하기 위해서는 fetchQuery와 prefetchQuery의 차이점을 알아보자.

prefetchQuery

prefetchQuery는 결과값을 리턴하지 않으며, 데이터 패칭에 실패할 경우 에러를 던지지 않는다는 특징을 가지고 있다.

따라서 데이터를 불러오지 못하더라도, UI를 그려줄 수 있는 경우에는 prefetchQuery를 사용하면 된다.

// ...
await queryClient.prefetchQuery({
  queryKey: queryKeys.articles()
  queryFn: getArticles()
});
// ...

fetchQuery

fetchQuery와 같은 경우에는 결과값을 리턴하고, 데이터 패칭에 실패하는 경우에는 에러를 던진다.

따라서 error handling이 가능하다는 얘기이다.

언틸에서의 블로그 프로필 페이지를 예로 들어보자.

export const getServerSideProps: GetServerSideProps = async (context) => {
  try {
    setCookie(context)
    const username = getUsername(context)await queryClient.fetchQuery({
      queryKey: queryKeys.blog.username.body(username),
      queryFn: createGetBlog(username),
    })
    return {
      props: {
      dehydratedState: dehydrate(queryClient),
    },
  }} catch (error) {
    return {
      notFound: true,
    }
  }
}

블로그를 조회하는 api는 잘못된 username으로 요청하는 경우 404 페이지를 보여줘야 하기에 fetchQuery를 통해 구현해주었다.

또한 return value를 사용하는 경우에도 fetchQuery를 사용해 구현해줄 수 있다.