react-query

Next.js 프로젝트를 하면서 SSR을 잘 활용하지 못한 거 같아서 마음 한구석이 찝찝했다...😃그래서 이번 기회에 SSR을 활용하여 리팩토링 해봤다. Next.js에서 제공하는 data fetch과 캐싱 등을 이용할 수 있지만 무한스크롤, 로딩 처리 등 더 다양한 기능이 있어 react query가 더 유용할 거 같아 react query를 선택했다.(+ Next.js 14 App router와 react query v5를 사용하고 있습니다!) 클라이언트 렌더링과 서버 렌더링서버 렌더링은 사용자가 페이지를 로드하는 즉시 볼 수 있는 내용을 제공하기 위해 초기 HTML을 서버에서 생성하는 것을 말한다. 이는 페이지 요청 시마다 발생(SSR)할 수 있고 빌드 시 미리 발생(SSG)할 수 도 있다. 일반..

React Query(Tanstack Query) React Query란? React 애플리케이션에서 서버 상태를 가져오고 캐싱하며 동기화하고 업데이트하는 작업을 도와주는 라이브러리이다. 내가 React Query를 선택한 이유 Client 데이터와 Server 데이터 간의 분리가 된다. api 요청에 대한 로딩, 에러, 데이터(response) 관리가 쉽다. 네트워크 요청 관련 다양한 기능, 옵션들이 있다. (refetchOnWindowFocus, 브라우저에 포커스가 들어온 경우) 장점 중 하나로 캐싱도 있지만 나는 변경되는 데이터를 바로 받아야 했기 때문에 캐싱은 사용하지 않았다. 지저분한걸?! 그렇게 유용하게 잘 사용했으나.. 컴포넌트, 페이지 안에 api 관련 로직들이 같이 있다 보니 코드가 길어..