개념 설명
앱 라우터의 스트리밍 기능은 HTML을 자체적으로 제공, 브라우저가 사용자에게 콘텐츠를 점진적으로 표시하도록 지원. 이는 초기 로딩 시 전체 페이지가 준비될 때까지 기다리지 않고, 먼저 스켈레톤 UI를 보여준 후 데이터 페칭이 필요한 영역에 로딩 상태를 표시하다가, 모든 데이터 로드가 완료되면 최종 화면을 점진적으로 노출하는 방식. 페이지의 일부를 빠르게 렌더링하여 사용자에게 '무엇인가 보여주고 있다'는 인상을 주어 초기 로딩 시간을 체감적으로 단축시키는 효과.
사용 상황 예시
Next.js 환경의 Dynamic page에서 스트리밍 기능의 활용 빈도 높음. 예를 들어, 복잡한 데이터 조회나 API 호출로 인해 렌더링에 시간이 오래 걸리는 컴포넌트 존재 시, 해당 컴포넌트를 제외한 나머지 부분을 먼저 렌더링하여 사용자에게 빠른 피드백 제공. 사용자는 오래 걸리는 부분에 대한 지루함 없이, 로딩 바와 같은 대체 UI를 통해 기다림을 인지하며 더 나은 환경에서 상호작용 가능. 특히 초기 로딩 속도와 사용자 경험이 중요한 애플리케이션에 적합.
기본 문법
Next.js 앱 라우터에서 페이지 스트리밍 적용은 loading.tsx 파일 사용. 이 파일은 특정 라우트 세그먼트 내에서 데이터 로드를 기다리는 동안 보여줄 로딩 UI 정의.
// app/dashboard/loading.tsx
export default function Loading() {
return <p>대시보드 로딩 중...</p>;
}자주 하는 실수
- 적용 범위 혼동:
loading.tsx파일은 해당 파일이 위치한 경로 및 그 아래 모든 라우트 세그먼트에 적용. 이는layout.tsx와 유사한 특성. 특정 영역에만 적용 필요 시 다른 방법을 고려. - 비동기 컴포넌트 미사용: 스트리밍은 기본적으로
async키워드가 적용된 비동기 컴포넌트에만 작동. 동기 컴포넌트에는 스트리밍 효과 없음. - Page 컴포넌트 외 적용:
loading.tsx는 Page 컴포넌트의 로딩 상태를 처리하는 데 특화. 페이지가 아닌 일반 컴포넌트에 대한 스트리밍 처리는 Suspense와 같은 다른 React 기능을 사용해야 함. - 쿼리스트링 변경 시 재적용 오류: 브라우저에서 페이지 URL은 동일하고 쿼리스트링만 변경될 경우,
loading.tsx를 통한 스트리밍이 재적용되지 않고 페이지 전체가 한 번에 교체될 수 있음.
핵심 요약
- 사용자 경험 향상을 위한 HTML 점진적 표시 기능 제공.
loading.tsx파일을 통해 페이지 단위 로딩 UI 설정.- 비동기 컴포넌트에만 적용, 쿼리스트링 변경 시 재적용 주의.
출처: 한 입 크기로 잘라먹는 Next.js(v15)
