Next.js 13 클라이언트 컴포넌트에서 data fetch는 어떻게 해야 할까

이번에 app router를 사용하면서 기본적으로 data를 fetch가 필요한 경우 서버컴포넌트에서 Data Fetching Patterns을 사용했다.
그런데 문제가 있었다..

geolocation API를 사용해서 위도 경도 값을 받아온 다음 openweather API를 받아와야 하는 상황.(위도 경도로 해당 지역의 날씨를 받아와야 함) 이것을 서버컴포넌트에서 해야하는가 클라이언트 컴포넌트에서 해야하는가 고민을 했다.
openweather API를 받아오는것만 생각하면 data fetch니까 서버컴포넌트가 맞는거 같은데 geolocation API가 브라우저에서 제공하는 API이다 보니 클라이언트 측에서 openweather API를 사용하는것이 맞지 않나?? 두 생각이 머릿속에서 충돌 됬다 (오엠z l !!!) 🤦🏻‍♀️

애초에 geolocation API로 받아오는 값도 훅으로 만들어 놨었다. 
그래서 써칭을 좀 해보니..아직까진 클라이언트 컴포넌트에서 fetch가 필요한 경우 swr이나 리액트쿼리 같은 라이브러리를 사용하는것을 권장한다고 하는거 같다.  Fetching Data on the Client with third-party libraries

Data Fetching: Fetching, Caching, and Revalidating | Next.js

앞으로 클라이언트에서 fetch는 React에서 제공하는 use 훅으로 대체 되지 않을까..생각된다
왜냐면  next.js가 예고 하고 있다. 미래의 API라고...ㅎㅎ
use는 클라이언트컴포넌트에서 Promise나 context가 반환하는 값을 읽게 해주는 훅이다. 
리액트는 서버컴포넌트에서는 async await을 사용하고 클라이언트 컴포넌트에서는 use를 사용하라고 말하고 있다.
아직 베타버전인지..사용하는것을 권장하지 않고 있다.

 

그래서 결론적으로 swr을 사용해서 위도 경도값을 받아온 다음 openweather API를 호출했다.

  const rq = useSWR(
    coordinates.lat > 0
      ? `https://api.openweathermap.org/data/2.5/weather?lat=${coordinates.lat}&lon=${coordinates.lng}&lang=kr&appid=${process.env.NEXT_PUBLIC_OPENWEATHER_APIKEY}`
      : null,
    fetcher,
  )

그리고 서버컴포넌트에서 위치 정보를 얻게 되면 클라이언트에서 위치정보를 수집후 서버로 전송해야 할기 때문에 불필요한 서버부하를 초래 할 수 있다고 한다. 그래서 클라이언트 컴포넌트에서 위치정보를 얻고 openweather api를 호출하는 방식으로 진행 했다.