Next.js Loading.js (Loading UI)와 스트리밍에 대해서 알아보자

KUKJIN LEE • 7개월 전 작성

Loading UI 생성

loading.js는 React Suspense를 사용하여 의미 있는 Loading UI를 생성할 수 있도록 합니다.
이 규칙을 사용하면 서버에서 즉각적인 로딩 상태를 보여줄 수 있고, 경로 세그먼트의 콘텐츠가 로드되는 동안 사용자에게 피드백을 줄 수 있습니다.
새로운 콘텐츠는 렌더링이 완료되면 자동으로 교체됩니다.

즉각적인 로딩 상태

즉각적인 로딩 상태는 탐색 즉시 표시되는 대체 UI입니다.
미리 렌더링된 로딩 지시기(예: 스켈레톤, 스피너)나 미래 화면의 작지만 의미 있는 부분(예: 커버 사진, 제목 등)을 사용할 수 있습니다.
이는 앱이 응답하고 있다는 것을 사용자에게 이해시키고 더 나은 사용자 경험을 제공합니다.

로딩 상태 생성 방법

폴더 내에 loading.js 파일을 추가하여 로딩 상태를 생성합니다.
loading.js는 layout.js 내에 중첩되어 page.js 파일과 그 아래의 모든 자식을 <Suspense> 경계 안에 자동으로 래핑합니다.

주의사항

서버 중심 라우팅일지라도 탐색은 즉시 이루어집니다.
탐색은 중단 가능하며, 다른 경로로의 이동은 경로의 콘텐츠가 완전히 로드될 필요 없이 이루어질 수 있습니다.
새로운 경로 세그먼트가 로드되는 동안 공유 레이아웃은 상호 작용할 수 있습니다.
권장사항: Next.js가 이 기능을 최적화하므로, 경로 세그먼트(레이아웃 및 페이지)에 대해 loading.js 규칙을 사용하세요.

Suspense를 사용한 스트리밍

loading.js 외에도, 사용자의 UI 컴포넌트에 대해 수동으로 Suspense 경계를 생성할 수 있습니다.
앱 라우터는 Node.js와 Edge 런타임 모두에 대해 Suspense를 사용한 스트리밍을 지원합니다.

스트리밍이란?

스트리밍 작동 방식을 이해하기 위해서는 SSR(Server-Side Rendering)과 그 한계를 이해하는 것이 도움이 됩니다.
SSR은 사용자가 페이지를 보고 상호 작용할 수 있기 전에 완료되어야 하는 일련의 단계가 있습니다.
스트리밍은 페이지의 HTML을 더 작은 청크로 나누고 이 청크들을 서버에서 클라이언트로 점진적으로 보낼 수 있게 해줍니다.
이를 통해 모든 데이터가 로드되기를 기다리지 않고도 페이지의 일부를 더 빨리 표시할 수 있습니다.

SEO

Next.js는 클라이언트에 UI를 스트리밍하기 전에 generateMetadata 내의 데이터 페칭이 완료될 때까지 기다립니다. 이는 스트리밍된 응답의 첫 부분에 <head> 태그가 포함되도록 보장합니다.
스트리밍은 서버 렌더링되므로 SEO에 영향을 주지 않습니다.

결론

Next.js는 데이터 페칭이 완료될 때까지 기다린 후에 UI를 클라이언트에 스트리밍하기 시작합니다. 이 과정에서 <head> 태그와 같은 메타데이터가 스트리밍 응답의 첫 부분에 포함되도록 보장하여, 검색 엔진 로봇이 페이지의 메타데이터를 올바르게 인식하고 처리할 수 있게 합니다. 이는 페이지의 SEO 성능에 긍정적인 영향을 미칩니다.

즉, 스트리밍을 통해 페이지의 콘텐츠가 점진적으로 사용자에게 제공되는 동안에도, 검색 엔진 최적화에 필수적인 메타데이터가 포함된 페이지의 초기 부분을 먼저 로드할 수 있기 때문에, 검색 엔진이 페이지를 적절히 이해하고 색인화할 수 있습니다. 따라서, 사용자 경험을 향상시키면서도 SEO 요구 사항을 충족시키는 데 도움이 됩니다.