next.js에서 react-query 사용

Question

내부에서 react-query를 사용하다보니 이런 의문점들이 생겼습니다.1. react-query prefetch 기능을 사용하면서 Suspense 기능도 함께 사용할 수는 없는가? : 아직까지 함께 사용하는 것은 불가능하다고 들은 것 같긴 하다. 내가 알고 있는 정보가 맞는 것인가?2. 플레이리스트 프로젝트를 진행할 때, react-query prefetch를 사용하는 것이 맞을까, streaming 기능을 사용하는 것이 맞을까?3. 나아가 Next.js 14에서 react-query를 사용하는 것이 사용하지 않는 것보다 더 득이 되는 게 있다고 보는가? Next.js 14에는 cache 기능이 내장되어 있다.두 번째의 경우에는 streaming 기능이 아직 완전하지 않아 prefetch를 선호하시는 분들이 더러 계신 것 같다는 생각이 들었습니다. 물론 streaming 기능을 사용하면 WaterFalls 때문에도 좋지는 않을 거고..그런데 또 한 편으로는 무수히 많은 음악들을 api를 통하여 prefetch로 불러오면 SSR 측에서 계산 시간이 오래 걸려 흰 화면이 보이게 되지 않을까..? 하는 생각도 듭니다.(이게 맞나 헷갈려 죽겠네요..)next.js에서 react-query 사용하는 법을 파다보니 여러 가지 궁금한 점들이 생기네요.. 저 혼자 생각할 수록 점점 더 헷갈리고, 더 많은 분들의 의견이 궁금하여 이렇게 질문을 남깁니다

kenu,전독시 · Answer

컴포지트 · Answer

Suspense 대응된 애들 아직도 별로 없거나 실험적입니다. 맞습니다.저같으면 후자 택하겠습니다.앱 라우터 방식을 사용하면 react-query 필요없습니다. Next.js 14 기준 정보는 서버 컴포넌트로 가져오고, 전달은 서버 액션을 쓰면 됩니다. 제가 이미 그렇게 해서 운영중인 사이트 있습니다. 캐시 관리가 관건이죠.기존 페이지 라우터를 쓰겠다면, getServerSideProps 를 위시한 서버단 처리는 왠만하면 안 쓰는 방향이 사용자 경험 측면에서 유리하니, react-query 에 대응하는 것이 좋고,앱 라우터를 쓰겠다면, 흰 화면 대응이 오히려 제공되기 때문에 별도로 대응할 필요 없이 메뉴얼대로 진행하면 됩니다.prefetch 는 항상 정답이 아닙니다. 정적인 컨텐츠 위주일 경우에 유리하지, 동적 컨텐츠의 경우 틀만 준비할 게 아니라면 사용자가와 개발자 모두 만족할만한 코딩과 화면은 어렵습니다.

next.js에서 react-query 사용

2개의 답변

Q&A 목록