1. Streaming 개요

서버에서 클라이언트로 HTML을 점진적으로 렌더링한다.

서버에서 HTML을 렌더링 하기전에 데이터 fetch 작업등으로 블로킹이 될 수 있는데, 이를 개선하기 위해 사용하는 기능이다. (모든 데이터를 기다릴 필요없이 페이지의 일부를 더 빨리 표시하여 상호작용)

위 이미지처럼, HTML을 작게 나누어 준비되면 점진적으로 렌더링 한다.

app 폴더 아래에 loading.js 를 사용하여 쉽게 사용이 가능하다.

즉, Streaming을 통해 느린 데이터 요청이 전체 페이지를 차단하는 것을 방지할 수 있다.

이를 통해 사용자는 UI가 사용자에게 표시되기 전에 모든 데이터가 로드될 때까지 기다리지 않고 페이지의 일부를 보고 상호작용 할 수 있다.

2. 전체 페이지 스트리밍

위와 같이 loading.js를 만들게되면 layout.js, page.js 를 포함한 파일들은 Suspense로 래핑되게 되어 loading 될 때까지 loading.js가 반환하는 UI를 렌더링하게 된다.

// 원한다면, 'use client' 지시어를 사용하여 클라이언트 컴포넌트로 사용도 가능
export default function Loading() {
  // Or a custom loading skeleton component
  return <p>Loading...</p>
}