개발자
Next.js 와 데이터 패칭 관련 React Query SSR
안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...
답변 1
1. data 값을 어떻게 사용할 지는 자유입니더. 2. 서버 상태가 변경되어 캐시를 업데이트 해야하는 경우 setQueryData로 직접 캐시 데이터를 수정하거나 invalidateQueries를 통해 무효화하고 다시 가져오면 됩니다
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 11월 13일
`useQuery`에서 가져온 `data`는 immutable이므로, 직접 변경할 수 없습니다. 그 때문에, useState를 통해 별도의 상태를 만들고 이 상태를 이용하여 수정하는 것은 옳지 않습니다. 대신, React Query에서 제공하는 `mutate`, `mutateAsync` 함수 등을 사용하면 됩니다. React Query는 데이터 재활용 측면에서 아주 강력하며, 다음과 같은 방식으로 mutation과 query를 연결하여 사용합니다. 1. 첫째, `useMutation` API를 사용하여 서버에 요청을 보내고 데이터를 업데이트합니다. 2. 둘째, mutation 성공 후 mutation 객체에서 제공하는 `onSuccess`나 `onSettled` 콜백 내부에서 해당 쿼리를 재요청(refetch)하여 최신 데이터로 업데이트합니다. 따라서 마이페이지의 경우 아래와 같은 과정으로 진행될 수 있습니다. 1. SSR 시점에 prefetch된 데이터를 사용하여 초기 렌더링을 합니다. 2. 유저가 페이지상의 어떤 액션(예: 버튼 클릭)을 통해 데이터 수정 요청을 합니다. 3. 해당 요청은 useMutation 내부에서 처리되고 서버는 동기적으로 데이터 업데이트 작업을 수행합니다. 4. Mutation이 성공적으로 완료된 후 onSuccess 내부에서 다시 useQuery를 통해 데이터를 refetch하면 페이지에는 최신 데이터가 반영됩니다. 이렇게 하면 서버와 클라이언트 사이의 데이터 동기화 문제를 해결할 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!