본문 바로가기

NextJS

2024.3.14 기록 (streaming SSR)

 

 

서스펜스(Suspense)를 이용하여 기존에 페이지가 로딩되는 부분을 대처하는 방법을 배운 적이 있다.

 

try/ catch를 이용한 에러 상태를 대신하여 처리하는 방식이다.

 

서버 사이드 랜더링(SSR)에서도 이 서스펜스를 통해 비동기 렌더링을 진행할 수 있다. 

 

사용법은 간단하다,

 

기존에 서스펜스를 사용하며, 서버컴포넌트를 사이에 두면 된다

<Suspense fallback={<div>로딩 중...</div>}>
  <Todo />
</Suspense>

 

 

 

이렇게 되면 비동기 통신이 가능해지기때문에 서버와 프라우저간의 간극이 굉장히 많이 줄어들게 된다.

이렇게 되면 UX가 향상되게 된다

 

 

 

 

 

Streaming Server-Side Rendering

Generate HTML to be rendered on the server in response to a user request

www.patterns.dev