Suspense

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

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

• A : 특정 페이지에 대한 모든 데이터를 서버에서 가져옵니다.
• B : 서버는 페이지의 HTML을 생성합니다.
• C : HTML, CSS 및 페이지의 JavaScript 가 클라이언트로 전송되고, HTML 및 CSS를 사용하여 비대화형 사용자 인터페이스가 표시됩니다. → noninteractive
• D : React가 사용자 인터페이스를 상호 작용 가능하게 만듭니다. → hydration

위 단계에서, suspense는 C단계에서 부터 사용된다. C 단계는 클라이언트가 서버에서 받은 HTML, CSS로 웹 페이지의 초기 버전을 로딩시켰지만, 아직 사용자는 상호 작용할 수 없는 단계이다.

예를 들어 버튼을 클릭한다던지, input에 정보를 작성하는 등의 동작이 불가한 상태이다. 사실상 사용자가 페이지를 볼 수만 있고, 아무것도 할 수 없는 상태이다.

상호작용을 하려면 D 단계에서 JavaScript와 React와 같은 라이브러리나 프레임워크가 Hydrate 하는 과정이 끝나야 상호작용이 가능해진다.

D 단계까지 지나야 사용자의 화면에 비로소 정상적인 상호작용 할 수 있는 웹페이지가 되는 것이다. 즉 4단계부터 5단계가 끝나는 과정까지, 사용자가 이유 없이 기다리거나 상호작용 할 수 없는 돌과 같은 페이지를 접해야 하는 의미 없는 시간을 필연적으로 가져야 하는 것, 바로 그 시간에 suspense를 사용하여 로딩 중 이라는 의미를 사용자에게 전달해주어 의미 없는 기다림이 되지 않도록 해주는 것이다.