Suspense 컴포넌트의 fallback 요소로 클라이언트 컴포넌트 전달?
안녕하세요.
Suspense 컴포넌트의 fallback 요소로 서버 컴포넌트 전달은 문제가 없는데, 내부적으로 useEffect와 타이머를 사용하는 클라이언트 컴포넌트를 전달했더니 해당 훅과 관련된 내용은 모두 스킵되고 그냥 초기 렌더링 내용만 나오는 것 같은데, 애초에 클라이언트 컴포넌트는 전달이 불가능한걸까요?
클라이언트 컴포넌트 사용 의도는 1초마다 로딩바 게이지가 증가하는 모습을 보여주고 싶어서 사용해보려고 했습니다.
공식 문서를 봐도 해당 내용에 대해서는 언급이 없는 것 같습니다.
감사합니다.
답변 1
2
안녕하세요! Suspense 내부에서 컴포넌트의 상태를 추적하기 위해서는 Promise의 상태를 throw 해주어야 합니다. Suspense는 내부 자식 요소에서 throw한 promise의 상태가 pending 인경우 fallback에 등록해준 컴포넌트를, success 상태일 경우 promise 상태가 완료되었다는 것을 인지하고 내부 children 컴포넌트를 보여주게 됩니다.
서버 컴포넌트가 정상적으로 동작한 이유는 async/await로 감싸주었기 때문에 await 걸린 코드가 완료된 여부를 파악하여 Suspense가 이를 추적하고 동작이 가능했습니다.
Next.js에서 loading.jsx, error.jsx 모두 이러한 형태로 구현되어 있습니다.
하지만 client component에서 useEffect를 사용하는 경우는 반환되는 promise 상태가 없이 JSX 요소만을 반환하기 때문에 정상적으로 Suspense가 동작하지 않게 됩니다.
리엑트 공식 문서에서는 CSR인 경우 실험적인 기능이지만, 데이터 fetching을 use와 함께 사용해서 Promise 상태를 Suspense에게 알려주라고 하고 있습니다. 아직은 실험 단계여서 아마 19 버전에 정식 반영되지 않을까 싶어요. 공식 문서의 Suspense와 use를 참고하면 좋을 것 같습니다.
공식 문서의 Suspense 예제 코드는 별도로 use hook을 만들어서 사용하고 있습니다.
https://react.dev/reference/react/Suspense
https://react.dev/reference/react/use
캡처링부분 질문있습니다.
0
74
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
109
2
css 라이브러리 추천 부탁드립니다
0
140
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
130
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
171
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
108
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
131
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
97
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
229
2
fetch 캐싱과 revalidate 관련
0
84
2