개발자

useSuspenseQuery의 SSR 요청

2024년 04월 02일•조회 332

안녕하세요, Next.js (v13-14), react-query (v5), page router 환경일 때, useSuspenseQuery와 Suspense를 사용했는데 찾아보니 useSuspenseQuery는 컴포넌트 렌더링 시점에 데이터를 로딩하도록 설계가 되어 있어서 Next.js에서 getStaticProps or getServerSideProps 함수를 사용하지 않아도 서버에서 api 요청이 보내지는게 맞을까요? 제가 테스트해보니 위의 가정 했던 것 처럼 동작하는것을 확인을 했지만 문서에서는 그런 내용을 찾을 수가 없어서 질문을 올려봅니다. 감사합니다!

next.js

suspense

react

react-query

fronted

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

익명님의 질문

답변 1

저도 똑같은 현상이 재현돼요. 혹시 이유를 알아내셨나요?

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

이미 회원이신가요?

AI 답변

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 04월 02일

React Query의 `useSuspenseQuery`는 Suspense를 지원하는 훅으로, 주로 데이터 로딩 시 리액트 컴포넌트가 suspend되게 함으로써 로딩 상태를 좀 더 우아하게 다루도록 돕습니다. `useSuspenseQuery`는 클라이언트 사이드에서 데이터를 요청하기 때문에, 페이지가 처음 로드될 때 서버에서 API 요청을 보내지 않습니다. 이는 Next.js의 `getServerSideProps` 혹은 `getStaticProps`와 같은 서버 사이드 렌더링(SSR) 기능과는 다르게 작동합니다. SSR 방식은 페이지가 각 요청에 대해 서버에서 렌더링되고 해당 결과가 HTML 형태로 클라이언트에 전달됩니다. 그러나 Next.js 12 버전 이상부터는 React 18의 Suspense를 지원하여 `useSuspenseQuery`와 같은 Suspense 사용법을 SSR 환경에서 동작하도록 할 수 있습니다. 이 경우 초기 페이지 로드 시점에 서버에서 API 요청을 보낼 수 있으며, 이후 클라이언트 측에서 추가적인 데이터 페칭이 발생할 때 Suspense 기능이 활용됩니다. 정확한 동작 확인은 여러 변수 (Next.js 버전, React-query 설정 등)에 따라 달라질 수 있으므로, 항상 최신 문서와 예제 코드를 참고해야 합니다. 해당 기술 스택에서의 구체적인 동작 방식에 대한 정확한 정보는 Next.js와 React Query의 공식 문서를 확인하는 것이 가장 안전합니다.

목록으로