data fetching
-
react-query useInfiniteQuery 데이터 편하게 사용하기Tip 2022. 8. 31. 17:45
(이 글은 react-query@3.19.1을 바탕으로 작성되었습니다) react-query를 사용할 때 useQuery만큼이나 많이 사용하는 것이 useInfiniteQuery이다. 특정 웹 사이트의 경우 useQuery보다 많이 사용한다. 사용 방법 자체도 무척 간편하게 되어 있어서 문서를 확인하고 사용하는데 별다른 제약이 없다. 그런데 데이터가 오는 방식이 특이하다. 만약 데이터를 axios로 받아왔을 때의 형식은 아래와 같다. { data: { posts: [...] } } 이런 데이터 형태는 추가로 받아올 때 역시 동일하다. 나의 경우 react-query를 사용하기 전 redux-toolkit을 사용할 때는 아래와 같은 방법을 사용했다. // lodash 미사용 state.posts = [....
-
NextJS Data Fetching (feat. CSR, SSR, SSG, ISR)Next.js 2022. 8. 29. 16:43
1. Data Fetching이란 SPA가 Web 세상에서 새로운 시대를 열었다는 것에 의문을 제시할 사람은 없을 것이다. 기존에 페이지를 이동할 때마다 새로고침이 되며 빈 화면을 봐야 했던 이용자들은 이제 로딩이 없는 것과 비슷한 환경에서 사이트를 사용할 수 있게 되었기 때문이다. 이는 확실히 획기적이었고 대다수의 웹사이트가 이제는 SPA로 되어있고 변화하고 있다. 하지만 SPA에도 치명적인 문제가 있었다. 웹사이트의 운영자들은 어떻게든 네이버나 구글 등의 검색 결과에 자신의 웹사이트가 노출되기를 원하는데 SPA의 경우 페이지를 모두 그린 뒤 데이터를 가지고 오는 CSR방식이 기본이기에 검색 사이트들의 Bot이 웹사이트에 접속했을 때 아무것도 없는 빈 페이지로 판별해 버렸기 때문이다. (물론 최근 구글..