nextjs 연습-005-데이터 패칭 1

클라이언트 사이드에서의 데이터 패칭

 

클라이언트 사이드(이하 클라단)에서의 데이터 패칭은 기존 리액트에서 사용하던 방식과 거의 유사한 것 같다.

 

 

이런 식으로 하면 아주 간단하고 원시적으로 데이터 패칭이 이루어진다. 다만 여기에 로딩이나 실패 체크가 없는 것이 문제다. 그냥 기본적인 패칭이지만 나는 여기에 react-query(이하 리액트쿼리)를 사용할 것이다. 다른 블로그 글을 참조하여

 

app/layout 파일에 쿼리클라이언트를 심어준다. 기존 리액트에서는 index에서 하던 것을 여기서는 layout에서 한 것이다.

 

 

먼저 간단하게 axios구조를 만들어주고

 

 

그것을 받아낼 api 파일을 다시 생성한다. 여기까지 일단 수도코드 수준으로 짠 탓에 잠깐 세이브

 

 

하자마자 에러가 터졌다. 검색해보니 쿼리클라이언트프로바이더를  서버 컴포넌트에서 감싸서 발생한 문제라고 한다! 아이고 이런..... 그러면 layout에 붙이면 안되는건가?

 

 

우선 검색한대로 레이아웃에 붙인 쿼리클라이언트프로바이더를 걷어내니 버그가 사라졌다.

 

 

그러면 쿼리프로바이더는 대체 어디에 꽂아야할까?

 

 

그냥 밖에다 컴포넌트로 꺼내면 되는 것이었다!

레이아웃 - 쿼리프로바이더 - 페이지 순으로 포장되기에 리액트 쿼리가 들어가는 페이지에 하나하나 싸맬수가 있는 것이다.

 

 

정리

1.클라이언트 상에서 데이터 패칭을 진행하는데 리액트 쿼리를 쓸 수 있다.

2. 리액트 쿼리를 사용하면 CSR에서 패칭 관리가 수월하지만, 그러기 위해 추가적인 조치가 필요하다.

3. QueryClientProvider를 포장하는 방식이 기존 리액트와 달라진다. 기존 리액트는 index에서 프로바인더를 선언하고 사용하면 전체적으로 신경 쓸 필요가 없지만 nextjs에서는 CSR과 SSR이 갈리기 때문에 차이점을 알아둬야한다.