Nextjs - Suspense

Suspense 란?

실제 콘텐츠가 로딩되는 동안 보여주는 대체 콘텐츠
suspense를 사용하면 스켈레톤 및 스피너와 같은 로딩 표시기를 pre-rendering 할 수 있다.
로딩시간이 길어질때, loading의 의미로 UI를 보여주는 것.
이를 통해 사용자는 앱이 응답하고 있음을 보다 더 잘 이해할 수 있고, 서비스는 더 나은 UX를 제공할 수 있다.

클라이언트가 서버에서 받은 HTML, CSS로 웹 페이지의 초기 버전을 로딩시켰지만, 아직 사용자는 상호 작용할 수 없는 단계이다. 예를 들어 버튼을 클릭한다던지, input에 정보를 작성하는 등의 동작이 불가한 상태이다.
사실상 사용자가 페이지를 볼 수만 있고, 아무것도 할 수 없는 상태.
상호작용을 하려면, 5단계에서 JavaScript와 React와 같은 라이브러리나 프레임워크가 Hydrate하는 과정이 끝나야 상호작용이 가능해진다.

사용

내가 사용하고자 하는 페이지의 폴더 내에 page.js와 같은 경로에 만들면 된다. 반드시 page.js와 같은 위치에 만들어야 한다.

// Loading.js
export default function Loading() {
	return <p>Loading...</p>
}

suspense로 감싸주면 해당 컴포넌트는 suspense의 바운더리 안으로 들어옴

import Loading from "./Loading"
<Layout>
  <Nav />
  <Suspense fallback={<Loading />}>
   <Page /> // Page로 컴포넌트는 서스펜스 바운더리에 있다.
  </Suspense>
</Layout>

Suspense는 데이터를 가져와서 HTML을 만들고 JavaScript를 hydrate하는 등의 일련의 과정을(비동기 작업들) 수행하는 컴포넌트를 래핑하고,
해당 작업이 진행되는 동안 대체 UI(fallback 속성에 있는)를 표시한 다음 작업이 완료되면 실제 UI를 교체하는 방식으로 작동한다.