[next 14 공식문서 부시기] 2.2 Loading 페이지와 Streaming

Loading UI

 

loading.js 파일을 활용해 콘텐츠가 로드되는 동안 서버에서 로딩 상태를 표시할 수 있습니다 . 렌더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다.

 

※ Instant Loading States

 

같은 폴더에서 loading.js 는 layout.js 안에 중첩됩니다. page.js 파일과 그 아래의 모든 하위 항목을 경계에 자동으로 래핑합니다.

Streaming

 

기존 SSR 의 이해

 

1. 먼저, 특정 페이지의 모든 데이터를 서버에서 가져옵니다.
2. 그런 다음 서버는 페이지의 HTML을 렌더링합니다.
3. 페이지의 HTML, CSS 및 JavaScript가 클라이언트로 전송됩니다.
4. 상호작용은 없는 사용자 인터페이스는 생성된 HTML 및 CSS를 사용하여 표시됩니다.
5. 마지막으로 React는 hydrate히여 비로소 상호작용 가능한 인터페이스를 만듭니다.

이 과정은 순차적으로 진행되기 때문에 모든 데이터를 가져온 후에만 서버가 페이지의 HTML을 렌더링할 수 있습니다. 그리고 클라이언트에서 React는 페이지의 모든 구성 요소에 대한 코드가 다운로드된 후에만 UI를 하이드레이션할 수 있습니다.

Streaming

React 및 Next.js를 사용한 SSR은 사용자에게 콘텐츠를 가능한 한 빨리 표시하여 인지된 로딩 성능을 향상시켰지만 페이지가 사용자에게 표시되기 전에 서버에서 모든 데이터 가져오기가 완료되어야 하므로 여전히 속도가 느릴 수 있습니다.

 

Streaming을 사용하면 페이지의 HTML을 더 작은 청크로 나누고 점진적으로 해당 청크를 서버에서 클라이언트로 보낼 수 있습니다. 이를 통해 UI가 렌더링되기 전에 모든 데이터가 로드될 때까지 기다리지 않고 페이지의 일부를 더 빨리 표시할 수 있습니다.

 

스트리밍은 각 구성 요소가 하나의 덩어리로 간주될 수 있기 때문에 React 의 Component 모델과 잘 작동합니다. 우선 순위가 더 높거나(예: 제품 정보) 데이터에 의존하지 않는 구성 요소(예: 레이아웃)가 먼저 전송될 수 있으며 React는 더 일찍 hydration 을 시작할 수 있습니다. 우선 순위가 낮은 구성 요소(예: 리뷰, 관련 제품)는 해당 데이터를 가져온 후 동일한 서버 요청으로 보낼 수 있습니다.

결과적으로 다음과 같은 이점을 얻을 수 있습니다.

1. Streaming Server Rendering: 서버에서 클라이언트로 HTML을 점진적으로 렌더링합니다.
2. Selective Hydration: React는 사용자 상호작용을 기반으로 어떤 구성요소를 먼저 상호작용 가능하게 만들 것인지 우선순위를 정합니다.

---

참고

https://nextjs.org/docs