영화/React, NextJS, Typescript, Vercel

16. Data Fetching(데이터 가져오기) - Suspense(임시적 로딩상태)

본시모니 2025. 5. 15. 10:16

Suspendse component로 감싸게 되면 데이터를 fetch 하기 위해 이 안의 component를 await하는 것이고

병렬적으로 2가지를 동시에 fetch를 할 수 있는데 하나의 요청이 완료되면 즉시 component가 render가 된다.

component가 준비되면 그 UI를 사용자에게 전달해주고 그리고 준비되는 동안에는 fallback을 전달해준다.

MovieDetail component에서 fetch를 하지 않아 loading 파일은 아무것도 하지 않는다.

왜냐하면 await 하는게 아무것도 없기 때문이다.

loading component가 전체 페이지를 완전히 대체하는 것이었고 요청이 둘 다 마무리 되어야 페이지가 표시되었다.

하지만 suspense component를 사용하게 되면 병렬적으로 2가지를 동시에 fetch를 하더라도 하나의 fetch가 완료되는 순간 보여주고 그 이후에 두번째 fetch 결과를 보여주게 된다.

 

 

 

 

 

 

 

 

 

 

learn-nextjs14.z01
19.53MB
learn-nextjs14.z02
19.53MB
learn-nextjs14.z03
19.53MB
learn-nextjs14.z04
19.53MB
learn-nextjs14.z05
19.53MB
learn-nextjs14.z06
19.53MB
learn-nextjs14.zip
15.60MB