Suspense는 코드에서 로딩 상태를 나타내는 부분을 제거할 수 있게 해주는 api.

<Suspense
    fallback={
      <DeferredComponent>
        <HomeSkeleton />
      </DeferredComponent>
    }
  >
    <CategoryList />
  </Suspense>

코드에서 로딩 상태에 대해 신경쓰지 않아도 유저가 로딩 상태 화면을 볼 수 있다.

염두해야 할 점은 suspense는 다음 것들과 함께 사용할 수 없다.

Next.js의 getStaticProps, getServerSideProps, getStaticPaths

사실 당연한게, getStaticProps을 사용하면 유저가 로딩 상태를 확인할 일이 없다.

유저는 즉시 데이터를 확인할 수 있고, 백엔드에서는 페이지를 재생성함. 그래서 getStaticProps을 가진 페이지에서 suspense를 사용한다는건 사실상 말이 안되는 것.

따라서 Next.js에서 작업할 때 getStaticProps나 getStaticPaths를 사용할 수 있지만,

만약 Next.js를 사용하지 않거나 getStaticProps, getStaticPaths를 사용하지 않을 때는 suspense를 자주 사용하면 좋음.

suspense를 사용해도 유저에게 로딩 표시를 보여줄 수 있음. 그런데 개발자로서 코드에서 로딩 상태에 대해 신경써야 할 게 전혀 없어짐. 따라서 getStaticProps을 잘 사용하고 있더라도 suspense를 알아두면 아주 좋다.

( suspense는 리액트를 사용하는 일반적인 방식이다. )

suspended란 리액트가 로딩이 끝나기전까지 컴포넌트를 렌더링 하지 않겠다는 뜻.

보통 리액트는 컴포넌트를 바로 렌더링해줌. 그래서 개발자가 데이터가 없는 로딩 상태일 때 어떤걸 보여줄 지 코드로 작성해줘야 함