특수 파일 loading.js를 사용하면 React.Suspense로 의미 있는 로딩 UI를 만들 수 있습니다. 이 규칙을 사용하면 Route Segment의 콘텐츠가 로드되는 동안 서버에서 즉각적인 로딩 상태를 표시할 수 있습니다. 랜더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다.
즉시 로딩 상태
즉시 로딩 상태는 탐색 시 즉시 표시되는 fallback입니다. 스켈레톤, 스피너와 같은 로딩 표시기를 미리 랜더링하거나 표지 사진, 제목 등과 같이 향후 화면에서 작지만 의미 있는 부분을 미리 랜더링할 수 있습니다. 이를 통해 사용자가 앱이 반응하고 있음을 이해하고 더 나은 사용자 경험을 제공 할 수 있습니다.
폴더 내에 loading.js 파일을 추가하여 로딩 상태를 생성합니다.
export default function Loading() {
// You can add any UI inside Loading, including a Skeleton.
return <LoadingSkeleton />
}같은 폴더에서 loading.js는 layout.js 안에 중첩됩니다. page.js 파일과 그 아래의 모든 하위 파일은 자동으로 <Suspense> 경계로 감싸집니다.
Suspense로 스트리밍하기
loading.js 외에도 자체 UI 컴포넌트에 대한 Suspense 바운더리를 수동으로 생성할 수도 있습니다. 앱 라우터는 Node.js 및 Edge 런타임 모두에 대해 Suspense를 사용한 스트리밍을 지원합니다.
스트리밍이란?
React와 Next.js에서 스트리밍이 어떻게 작동하는지 알아보려면 서버측 랜더링SSR과 그 한계를 이해하는 것이 도움이 됩니다.
SSR을 사용하면 사용자가 페이지를 보고 상호 작용하기 전에 완료해야 하는 일련의 단계가 있습니다.
-
먼저 특정 페이지의 모든 데이터를 서버에서 가져옵니다.
-
그런 다음 서버에서 페이지의 HTML을 랜더링합니다.
-
페이지의 HTML, CSS 및 javascript가 클라이언트에 전송됩니다.
-
생성된 HTML과 CSS를 사용하면 상호작용이 없는 사용자 인터페이스가 표시됩니다.
-
마지막으로 React는 사용자 인터페이스를 결합시켜 상호작용 가능한 인터페이스로 만듭니다.
이러한 단계는 순차적이고 차단적이므로 서버는 모든 데이터를 가져온 후에만 페이지의 HTML을 랜더링 할 수 있습니다. 그리고 클라이언트에서는 페이지의 모든 컴포넌트에 대한 코드가 다운로드된 후에만 React가 UI에 하이드레이팅할 수 있습니다.
React 및 Next.js를 사용한 SSR은 사용자에게 상호작용이 없는 페이지를 최대한 빨리 보여줌으로써 체감 로딩 성능을 개선하는 데 도움이 됩니다.
그러나 페이지가 사용자에게 표시되기 전에 서버에서 모든 데이터 가져오기를 완료해야 하므로 여전히 속도가 느릴 수 있습니다.
스트리밍을 사용하면 페이지의 HTML을 더 작은 청크로 나누고 해당 청크를 서버에서 클라이어트로 점진적으로 전송할 수 있습니다.
이렇게 하면 UI를 랜더링하기 전에 모든 데이터가 로드될 때까지 기다릴 필요 없이 페이지의 일부를 더 빨리 표시할 수 있습니다.
스트리밍은 각 컴포넌트를 하나의 청크로 간주할 수 있기 때문에 React의 컴포넌트 모델과 잘 어울립니다. 우선순위가 높거나 데이터에 의존하지 않는 컴포넌트를 먼저 전송할 수 있으며, React는 하이드레이션을 더 일찍 시작할 수 있습니다. 우선순위가 낮은 컴포넌트는 데이터를 가져온 후 동일한 서버 요청으로 전송할 수 있습니다.
스트리밍은 긴 데이터 요청으로 인해 페이지 랜더링이 차단되는 것을 방지할 때 특히 유용합니다.
Example
<Suspense>는 비동기 액션을 수행하는 컴포넌트를 래핑하고, 액션이 진행되는 동안 폴백 UI를 표시한 다음 액션이 완료되면 컴포넌트를 교체하는 방식으로 작동합니다.
import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
export default function Posts() {
return (
<section>
<Suspense fallback={<p>Loading feed...</p>}>
<PostFeed />
</Suspense>
<Suspense fallback={<p>Loading weather...</p>}>
<Weather />
</Suspense>
</section>
)
}서스펜스를 사용하면 다음과 같은 이점을 누릴 수 있습니다.
-
스트리밍 서버 랜더링 - 서버에서 클라이언트로 HTML을 점진적으로 랜더링합니다.
-
선택적 하이드레이션 - React는 사용자 상호작용에 따라 어떤 컴포넌트를 먼저 인터렉티브하게 만들지 우선순위를 정합니다.
