6. Suspense, SSR의 단점 해소

React 18에서는 <Suspense /> 컴포넌트를 통해 새로운 두 가지 기능을 제공하면서 기존의 SSR 방식의 단점을 해소하였음

1. (HTML) Streaming SSR

Streaming SSR은 서버에서 HTML 코드를 부분적으로 스트리밍하는 방식으로,
렌더링 작업이 빠르게 완료된 마크업부터 먼저 렌더링하는 전략

이를 통해 SSR의 첫 번째 단점 을 해소하였음

2. 기존 SSR과 Streaming SSR의 렌더링 시나리오 비교

만약 다음과 같은 페이지를 렌더링 하는데 <Dashboard /> 컴포넌트는 렌더링에 필요한 데이터가 많다고 가정할 경우,

<div>
	<Header /> {/* 렌더링에 별도의 데이터가 필요없는 컴포넌트 */}
	<Dashboard /> {/* DB에서 렌더링에 필요한 데이터를 받아오는데 시간이 소요되는 컴포넌트 */}
	<Sidebar /> {/* 렌더링에 별도의 데이터가 필요없는 컴포넌트 */}
</div>

2-1. 기존의 SSR 방식대로 렌더링 작업을 수행할 경우

클라이언트 브라우저가 서버로부터 렌더링이 진행된 Static HTML을 응답받기 위해서는,
서버에서 <Header />, <Sidebar /> 뿐만 아니라 <Dashboard />의 렌더링에 필요한 데이터까지 모두 준비되고 전체 렌더링이 처리되어야 비로소 응답받을 수 있었음

하지만 <Dashboard /> 컴포넌트 하나 때문에 사용자에게 아무것도 표시되지 않는 빈 페이지(Blank page)를 보여주는 것보다는 <Header />와 <Sidebar />컴포넌트라도 먼저 렌더링된 페이지를 빠르게 보여주는 것이 UX에 더 좋을 수 있음

2-2. <Suspense />와 Streaming SSR 방식으로 렌더링 작업을 수행할 경우

<Suspense />를 활용하여 <Dashboard />의 렌더링 처리를 지연시킴

따라서 클라이언트 브라우저에서는 <Suspense />를 활용하여 Server의 <Dashboard />에 대한 렌더링 처리 작업을 기다리지 않고, <Header/>, <Sidebar/>만 우선적으로 Static HTML로 먼저 응답 받도록 동작함

<div>
	<Header /> {/* 렌더링에 별도의 데이터가 필요없는 컴포넌트 */}
	
	{/* <Dashboard /> 컴포넌트를 <Suspense />로 감싸서 지연 로딩시킴 */}
	<Suspense fallback={<Spinner />}>
		<Dashboard /> 
	</Suspense>
 
	<Sidebar /> {/* 렌더링에 별도의 데이터가 필요없는 컴포넌트 */}
</div>

function Spinner() {
	return <div>로딩 중..</div>
}

<Suspense />를 통해 <Header/>, <Sidebar/>가 먼저 사용자에게 응답 되고, <Dashboard> 부분에는 로딩 중.. UI가 표시됨

이후 <Dashboard /> 의 렌더링에 필요한 데이터가 모두 준비되면,

React는 추가적인 스트리밍(streaming)을 통해 HTML과 같이 동반된 inline <script />를 보내면서 로딩 스피너가 사라지고 <Dashboard /> 컴포넌트가 추가적으로 페이지에 렌더링됨

이를 통해 만약 특정 UI 영역(<Dashboard />)이 초기 HTML 로딩(Initial page loading)의 응답을 지연시키는 상황이 있을 경우, 응답이 빠른 컴포넌트들을 우선적으로 렌더링한 후, 추후 스트리밍을 통해 남은 UI가 렌더링되도록 할 수 있게 됨