NextJs를 이용한 SSR / SSG 마스터 하기 - 2

• react query로 SSR 구현
  • 일단 루트 파일
    • useState에 queryClient 저장
      • set은 갱신될 일이 없기 때문에 필요 없다
    • hydrate는 처음 봐서 뭔지 잘 모르겠음
      • 서버에서 데이터를 받을 수 있게 해주는 것
      • Hydrate란, Server Side단에서 렌더링 된 정적 페이지와 번들링된 js파일(Webpack)을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 js 코드를 서로 매칭시키는 과정을 말합니다.
      • 즉 hydrate가 일어나기전엔 자바스크립트 상호작용 x
  • 컴포넌트 안에다 해놓으면 csr로 해야할지 ssr로 해야할지 알 수 없음
    • 그래서 컴포넌트 밖에다 해줘여 함
    • getServerSideProsp안에 없으니까 ssr이 안되는 것
    • 저 함수 안에서 동작하게 하기 위해서 외부에서 가져오는 것
  • 구현 원리
    • 일단 맨 처음값을 리액트 쿼리를 사용하지 않고 불러오는 것 같음
      • 이렇게 하지 않으면 SSR이 되지 않는 듯
      • getServerSideProps를 사용하여 리액트 쿼리를 사용하지 않고 SSR방식으로 데이터 가져옴
    • 그리고 컴포넌트에선 cashe타임이 지날 때 마다 리액트 쿼리로 데이터 갱신
    • 그러면 마운트 될 때만 SSR? 근데 마운트 되고 나서도 SSR방식이 의미가 있나?
    • 첫 렌더링이 되기 전에 SSR로 값을 가져오는 것