Suspense

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

suspense의 사용성의 이해력을 높이려면, SSR이 페이지를 띄우기까지의 일련의 단계를 알아야 한다.

1. 특정 페이지에 대한 모든 데이터를 서버에서 가져옵니다.
2. 서버는 페이지의 HTML을 생성합니다.
3. HTML, CSS 및 페이지의 JavaScript가 클라이언트로 전송됩니다.
4. 생성된 HTML 및 CSS를 사용하여 비대화형 사용자 인터페이스
   (non-interactive : 사용자가 상호작용할 수 없는 정적인 상태)가 표시됩니다.
5. React가 사용자 인터페이스를 상호 작용 가능하게 만듭니다.

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

5단계까지 지나야 사용자의 화면에 비로소 정상적인 상호작용할 수 있는 웹페이지가 되는 것이다.
즉 4단계부터 5단계가 끝나는 과정까지, 사용자가 이유없이 기다리거나 상호작용할 수 없는 돌과 같은 페이지를 상대해야 하는 의미없는 시간을 필연적으로 가져야하는 것.

바로 그 시간에, suspense를 사용하여 로딩중이라는 의미를 사용자에게 전달해주어 의미없는 기다림이 되지 않도록 해주는 것이다.

적용

먼저 로딩을 표시해줄 수 있는 js문서를 만들자.
나는 Next에 적용할 예정이므로, Next 규칙으로 기록할 것이다.
내가 사용하고자 하는 페이지의 폴더 내에 page.js와 같은 경로에 만들면 된다. 반드시 page.js와 같은 위치에!

loading.js에는 다른 컴포넌트들과 똑같이 만들어주면 된다.
스타일이나 UI는 원하는대로 만들면 된다.

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

suspense로 감싸주면 해당 컴포넌트는 suspense의 바운더리에 들어오게 된다.

import Loading from "./Loading"

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

좀 더 세세하게 suspense를 입혀보자.

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

여러 원하는 모양으로 입힐 수 있다.

React 공식문서에서 보여주고 있는 적용된 모습을 보면 한번에 이해가 가능하다.
모든 단계가 진행되는 동안은 loading 글자가 띄워지고, 모든 단계가 끝나면 실제 컴포넌트 UI가 뜨는 것을 볼 수 있다!

정리

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

Reference

React 공식 문서
Next 공식 문서