nextjs, react@next, react-dom@next, (suspense mode) react-query을 같이 사용하면서 다음과 같은 이슈가 있었는데요.
- server에서 page 컴포넌트를 render할 때에 react-query useQuery의 queryFunction이 실행됨.
- 원래 react-query의 useQuery는 useEffect안에서 queryFunction을 실행시키기때문에 browser환경에서만 실행되어야하는데 (react-query의 suspense 옵션을 enabled하면) suspense for data fetching의 특성상 브라우저나 서버와 같은 환경과 상관없이 render와 동시에 queryFunction이 실행되기 때문에 위와 같은 상황이 발생합니다.
- 그런데 page 컴포넌트의 useQuery는 jwt가 필요한 api를 부르는 hook이었고 server request에 접근할 수 없기 때문에 cookie에 접근할 수 없고 jwt를 얻을 수 없기 때문에 무조건 error를 낼 수 밖에 없었습니다. 그래서 useQuery가 서버에서는 실행이 안되었으면 했는데요. 또, server에서 미리 해당 queryKey의 data를 prefetch하기 때문에 실제로 client에서 page가 render될 때에는 데이터가 있을 건데, 서버에서 불필요하게 useQuery의 queryFunction을 실행시키는 것을 막고 싶었습니다.
- 그래서 제가 땜빵(?)으로 취한 접근은 아래와 같이 useQuery를 server에서는 성공한 것처럼 if문을 추가했습니다.