[Nextjs]상태관리

Nextjs를 공부할겸 프로젝트를 하나 만들고 있는데, seo가 필요해서 ssr를 사용 해야했다. 근데 Nextjs에는 Hydrate라는 개념이 존재함.

따라서 비동기 서버 상태 관리는 react-query를 사용하고, 클라이언트 상태관리는 Recoil을 사용함.

1. 서버 상태관리 : react-query
2. 클라이언트 상태관리 : recoil

npm i react-query
npm install recoil

2가지를 적용하기 위해서 _app.tsx 파일에서 설정 해줘야함.

import '../styles/globals.css';
import React from 'react'; 
import type { AppProps } from 'next/app';
import { Hydrate, QueryClient, QueryClientProvider } from 'react-query';

function MyApp({ Component, pageProps }: AppProps) {
  const queryClient = React.useRef(new QueryClient());

  return (
    <QueryClientProvider client={queryClient.current}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
    </QueryClientProvider>
  );
}

export default MyApp

react-query 먼저 적용을 하는 과정에서 queryClient 만들때 React.useRef가 있는데, 어떤글이나 react-query 공홈에서는 useState를 사용하고 어떤글에선 useRef를 사용해서 둘이 무엇이 차이가 있는걸까 궁금했다. 그 이유를 알려면
useState와 useRef의 차이를 알면된다.

useState와 useRef 모두 상태관리를 위해 사용할 수 있다. 다만 
useState의 경우 state변화 후에 re-rendering을 진행하는 반면 useRef는 진행하지 않는다.

---

결론적으로 나는 서버상태관리로 react-query를 사용 하는데, 비동기 데이터를 다룰것이기 때문에 state가 변화해서 re-rendering 하지 않는다. 그러므로 나는 useRef를 사용하는게 맞다!

import '../styles/globals.css';
import React from 'react'; 
import type { AppProps } from 'next/app';
import { Hydrate, QueryClient, QueryClientProvider } from 'react-query';
import { RecoilRoot } from 'recoil';

function MyApp({ Component, pageProps }: AppProps) {
  const queryClient = React.useRef(new QueryClient());

  return (
    <QueryClientProvider client={queryClient.current}>
      <Hydrate state={pageProps.dehydratedState}>
        <RecoilRoot>
          <Component {...pageProps} />
        </RecoilRoot>
      </Hydrate>
    </QueryClientProvider>
  );
}

export default MyApp