Next.js App Router에서 loading.tsx와 Suspense는 어떤 관계이며 어떻게 사용하나요?

App Router의 loading.tsx는 해당 라우트 세그먼트에 자동으로 적용되는 Suspense fallback입니다. 사용자가 페이지를 이동했을 때 서버 컴포넌트나 데이터 로딩이 끝나기 전까지 보여줄 UI를 라우트 파일 구조로 선언할 수 있습니다.

예를 들어 app/products/loading.tsx를 만들면 /products 세그먼트가 준비되는 동안 자동으로 그 로딩 UI가 표시됩니다. 별도로 Suspense를 감싸지 않아도 Next.js가 라우트 경계에서 처리합니다.

반면 직접 사용하는 <Suspense fallback={...}>는 더 세밀한 컴포넌트 단위 제어에 적합합니다. 페이지 전체가 아니라 추천 상품 영역, 댓글 영역처럼 독립적으로 늦게 와도 되는 부분만 스트리밍하고 싶을 때 사용합니다.

<Suspense fallback={<CommentSkeleton />}>
  <Comments postId={post.id} />
</Suspense>

정리하면 loading.tsx는 라우트 중심의 기본 로딩 경험을 빠르게 만드는 도구이고, Suspense는 페이지 안에서 느린 부분을 잘게 나눠 사용자에게 먼저 보여줄 수 있게 하는 도구입니다. 좋은 UX를 위해 둘을 함께 쓰는 경우가 많습니다.