Next.js 10 - 스트리밍 렌더링

스트리밍이란?

컴포넌트를 한 번에 렌더링하지 않고, 준비된 것부터 차례대로 렌더링하는 방식

 

기존 SSR(서버 사이드 렌더링)은 모든 데이터가 준비되어야 화면이 출력된다.

스트리밍은 준비된 부분부터 점진적으로 보여 주기 때문에 체감 속도(perceived performance)가 훨씬 빠르다.

 

Suspense로 스트리밍 적용하기

<Suspense fallback={<div>Loading...</div>}>
  <Example />
</Suspense>

 

fallback은 로딩 중 보여 줄 UI (*스켈레톤)

내부 컴포넌트가 async거나 데이터 fetching 이 느릴 경우 자동적으로 스트리밍 분할된다.

 

주의사항

1. 해당 경로 아래의 컴포넌트도 스트리밍된다.

- /example 에 <Suspense> 태그가 있을 경우, /example/setting도 영향을 받는다.

 

2. 모든 컴포넌트에 적용되지 않는다.

- 비동기 컴포넌트(async / await 포함)에만 스트리밍이 적용된다

- 정적 페이지 (force-static)로 설정되어 있으면 HTML이 미리 생성되기 때문에 스트리밍을 사용할 수 없다.

 

3. loading.tsx는 해당 세그먼트의 page.tsx에만 적용된다.

- /example/loading.tsx는 /example/page.tsx에만 적용된다.

- 별도 component에 따로 로딩 상태를 지정하고 싶으면 <Suspense> 태그를 직접 사용해야 한다.

 

4. loading.tsx는 쿼리 스트링 변경에 반응하지 않는다.

- /example?q=a 에서 /example?q=b 로 이동해도 로딩 트리거 되지 않는다.

- 이 경우, <Suspense key={query}>의 방식으로 로딩을 제어할 수 있다.

---

*스켈레톤 UI란?

데이터를 불러오는 동안 실제 콘텐츠와 유사한 형태의 회색 박스나 로팅 틀을 먼저 보여 주는 UI 패턴

 

사용자는 페이지가 깨지거나 느린 느낌 없이 곧 콘텐츠가 나타날 것이라는 기대감을 갖게 된다.

로딩 중 텍스트를 출력하는 것보다 더 좋은 사용자 경험을 제공할 수 있다.