template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
65
작성한 질문수 15
아래 코드와 같이 template.tsx에서 서버fetch 후 사용처인 클라이언트 컴포넌트로 props 넘겨주도록 세팅해놓았습니다.
//template.tsx 자식 컴포넌트
export default async function Sidebar() {
const { isSucceed, body } = await getUserGetInfo(params);
return (
<SidebarLayout>
<GiftIcon isNewGift={!!body?.info.new_gift} />
'use client'
export default function GiftIcon({ isNewGift }: { isNewGift: boolean }) {
const { onClose } = useModal('SIDEBAR');
return (
<Link
className={isNewGift ? cn(st['active']) : ''}
///
<Icon type="Present" title="선물함" w={25} h={25} />
이 상태에서 next 페이지 이동 시 서버fetch는 리렌더링 되는것을 확인했는데
이상하게 클라이언트는 리렌더링이 되지 않습니다. 즉 서버 응답값은 상태가 바뀌어도 클라이언트 상태값은 바뀌지 않더라구요... 왜 이런걸까요ㅠㅠㅠ
답변 2
0
안녕하세요. 어떤 props(또는 state) 말씀하시는 걸까요? 그걸 console.log 찍어보시면 서버쪽과 클라이언트 쪽에서 둘 다 콘솔에 기록될 것입니다. 생각치도 못했던 리렌더링이 있을 수 있어서 한 번 찍어보시면 좋습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 변재정님.
Next.js와 React Query를 사용하는 과정에서 서버로부터 가져온 값을 클라이언트 컴포넌트의 상태와 동기화하는 부분에서 어려움을 겪고 계신 것 같습니다.
이 문제는 클라이언트 컴포넌트가 서버에서 받은 값의 변경 사항을 인식하지 못하는 것에서 발생합니다. 서버에서 가져온 데이터를 클라이언트에서 제대로 사용할 수 있도록 하려면 몇 가지 방법을 고려할 수 있습니다.
클라이언트 측 상태 관리 사용: 서버에서 받은 데이터를 클라이언트 측 상태로 관리하여 상태 변화에 따른 컴포넌트 리렌더링을 유도할 수 있습니다. React의 상태를 직접 사용하거나,
useEffect훅을 사용하여 서버에서 불러온 데이터를 클라이언트에서 관리합니다.React Query의
useQuery이용: 이미 서버로부터 데이터를 받아왔더라도 클라이언트 사이드에서useQuery를 활용하면 클라이언트가 데이터의 변화를 감지하여 컴포넌트를 자동으로 리렌더링합니다.데이터 페칭 중복 방지: 만약 서버 데이터를 페이지 전환마다 새로 패치하고 싶지 않다면,
useSWR혹은useQuery와 같은 라이브러리를 사용하여 클라이언트에서 캐싱 및 데이터 페칭 상태를 관리합니다.
관련해서 이미 논의된 오해를 줄이기 위해 이미 충분한 Q&A가 있었는지 확인해 주세요:
- SSR의 state 초기화 관련 질문입니다.: 이 게시물에서는 Next.js에서 SSR을 사용할 때 상태 초기화로 인한 불일치에 대해 논의합니다. 같은 흐름에서 고민의 실마리를 찾으실 수 있을 것입니다.
- 리액트 쿼리로 변경 후 질문있습니다.: 서버에서 받는 응답과 클라이언트의 비동기 처리 문제에 대한 토론도 확인해 보세요.
위 방법들 중 하나 혹은 여러 개를 적용하여 문제가 해결되기를 바랍니다. 도움이 필요하시다면 추가적으로 질문해 주시기 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
71
2
깃에 소스코드를 찾을 수 없습니다.
0
112
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
97
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
108
2
css 라이브러리 추천 부탁드립니다
0
140
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
129
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
118
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
168
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
107
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
83
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
124
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
101
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
131
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
95
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
81
2
vanilla-extract 못찾는 문제
0
223
2
fetch 캐싱과 revalidate 관련
0
81
2
강의 듣는 방법
0
101
2