이 장에서는 Next.js에서 스트리밍을 활용하여 느린 데이터 요청 시 사용자 경험을 향상시키는 방법에 대해 다룹니다.
스트리밍은 전체 페이지가 로드되는 동안 사용자가 즉시 상호작용할 수 있도록 페이지를 더 작은 "청크"로 나누어 서버에서 클라이언트로 점진적으로 전송하는 데이터 전송 기법입니다.
스트리밍은 라우트를 더 작은 청크로 분할하여 서버에서 클라이언트로 점진적으로 전송함으로써 느린 데이터 요청이 전체 페이지 로딩을 차단하지 않도록 합니다. 이를 통해 사용자는 모든 데이터가 로드되기 전에 페이지의 일부를 보고 상호작용할 수 있습니다. React의 컴포넌트 모델과 잘 어울리며, 각 컴포넌트를 하나의 청크로 간주할 수 있습니다.
Next.js에서는 두 가지 방식으로 스트리밍을 구현할 수 있습니다:
loading.tsx 파일을 사용하여 페이지 전체의 로딩 상태를 관리합니다.
<Suspense>를 사용하여 개별 컴포넌트의 로딩 상태를 설정합니다.
loading.tsx 파일을 생성하여 페이지 로딩 시 보여질 fallback UI를 정의할 수 있습니다. 이 파일은 페이지 내용이 로드되는 동안 대체 UI를 제공하여 사용자에게 즉시 피드백을 줍니다.
로딩 스켈레톤은 실제 UI의 간단한 버전으로, 콘텐츠가 로드되는 동안 자리 표시자로 사용됩니다. 이를 통해 사용자는 콘텐츠가 로드되고 있음을 시각적으로 인지할 수 있습니다.
라우트 그룹을 사용하여 특정 페이지에만 로딩 스켈레톤을 적용할 수 있습니다. 이를 통해 불필요하게 다른 페이지에도 로딩 상태가 적용되는 것을 방지할 수 있습니다.