[프로젝트] Next.js_🫠 3

React-Query + Next.js

이번 프로젝트는 리엑트 쿼리와 넥스트를 같이 사용하기 때문에 리엑트쿼리 공식문서를 참고했다.

✅ SSR, SSG

react-query는 SSR을 위해 두 가지 방법의 데이터 프리패칭을 지원함
서버에서 데이터를 가져와 queryClient에 전달함

🤙 방법 1 : 데이터를 직접 프리패치하여 initialData로 전달하는 방법

getStaticProps 나 getServerSideProps 에서 원하는 API 를 요청하고 그에 대한 응답을 page 에 props 로 내려주고 그 값을 react-query 에 initialData 로 넣어주는 방법

export async function getStaticProps() {
  const posts = await getPosts()
  return { props: { posts } }
}

function Posts(props) {
  const { data } = useQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
    initialData: props.posts,
  })

  // ...
}

getStaticProps함수로 서버 측에서 Post데이터를 가져옴. 이 데이터는 popsts라는 키 값으로 props에 전달됨. 그 다음 Posts컴포넌트에서 useQuery를 사용하여 posts데이터를 가져오고 초기데이터로 props.posts를 사용하도록 설정

주의점
1. 트리 내 더 깊은 컴포넌트에서 useQuery로 데이터를 호출하는 경우 initialData를 그 깊은 곳까지 전달해야됨
2. 동일한 쿼리를 여러 위치에서 useQuery를 호출할 경우 모든 위치에 initialData를 전달해야됨
3. 서버에서 쿼리가 언제 가져와졌는지 판단 불가능

🤙 방법 2 : Hydration

getStaticProps or getServerSideProps에서 prefetch를 통해 데이터 요청
해당 캐시를 dehydrate해서 클라이언트에서 그 데이터를 rehydrate함

여러 쿼리를 사전에 가져와 해당 쿼리들을 queryClient에 저장하는 기능을 지원함. 이는 서버가 페이지를 로드할 때 미리 해당 데이터를 가져와서 마크업에 포함시킬 수 있음을 의미함.
그리고 이 데이터는 JS가 사용가능해지면 React-query가 이를 다시 가져와 클라이언트에서 해당 쿼리를 업그레이드하거나 Hydration 할 수 있음을 의미함. 이러한 과정에는 서버에서 렌더링된 이후 해당 쿼리가 만료된 경우, 클라이언트가 해당 쿼리를 다시 가져와 새로 고침하는 기능도 포함되어있음.

✅ useQuery vs Async,try/catch

난 당연히 더 나은 방법인 Hydration 방법을 택하기로 했다.

그리고 문득 당연하듯이 쓰던 reat-query의 캐시 기능이 정말 작동을 하는지 궁금해졌다

첫번째 방법은 일반적인 방식으로 데이터를 가져와봤고, 두번째에는 useQuery를 이용해서 데이터를 불러와봤다.

느린3G 환경에서 동일하게 실험 진행

🤙 방법 1 : 일반적인 방식

  const getMe = async () => {
    try {
      const data = await loadMe();
      setData(data);
    } catch (err) {
      console.log(err);
    }
  };
  

캐시를 사용하지 않아 데이터를 불러오는 동안 화면에는 데이터를 띄우지 못함

🤙 방법 2 : useQuery

const { data } = useQuery([QUERYKEYS.LOAD_ME], loadMe);

느린 3G환경임에도 캐시를 사용하기 때문에 페이지 전환 간에 데이터가 사라지지 않음.

잘 적용이 되는 듯 😊

✅ SSG 직접사용해보기

SSG라는건 빌드 시점에 서버에서 해당 API를 불러오는 것이기때문에, 개발환경에서 npm run build, npm run export를 하고 생성된 /out 파일에서 해당 컴포넌트 index.html을 실행했을때 해당 API를 통해 불러온 데이터가 나와야함.

먼저 getStaticProps를 사용하지 않고 그냥 데이터를 불렀을때 index.html을 확인해보자

getStaticProps를 사용하여 데이터를 가져온 경우 index.html을 확인해보자

export async function getStaticProps() {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery([QUERYKEYS.LOAD_PRODUCT], () =>
    loadMarketProductPaging({ size: 4, visible: true }),
  );

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

데이터가 성공적으로 빌드시점에 넘어온 것을 확인해볼 수 있다!!!!!!