Next.js 13+ App Router의 Suspense 설정

배경

프로젝트 상세보기 버튼을 클릭했을 때, 해당 프로젝트 Modal에 띄울 데이터가 다 오기 전까지 Modal 자체가 안떠서 Modal이 띄워지고 있는건가? 하는 느낌들었다.

이는 사용자 경험을 크게 저해한다고 생각을 했다.

이러한 문제를 해결하기위해 Modal에 대한 데이터를 다 불러오기전까지 현재 모달에 대한 데이터를 불러오는 중이다 라는 loading Modal을 띄위기위해 `Suspense`를 설정하려고 한다.

Suspense 란?
React의 Suspense는 컴포넌트가 비동기 작업(데이터 로딩 등)을 완료할 때까지 렌더링을 일시 중단하고, 대신 `fallback`으로 지정된 UI를 보여주는 기능이다.
이를 통해 빈 화면 대신 로딩 중임을 나타내는 스켈레톤 UI 등을 표시하여 사용자에게 긍정적인 피드백을 줄 수 있다.

---

로딩 경험 개선 : Suspense 설정 과정

Next.js App Router에서 Suspense를 적용하는 방법은 `loading.tsx` 파일 활용과 `<Suspense>` 컴포넌트 사용이 있다.

각각의 구현 방법을 간단하게 보면

1. React의 `Suspense` 컴포넌트 사용

• 페이지의 특정 부분만 로딩 상태로 처리하고 싶을 때 주로 사용한다.
• 예를 들어, 페이지의 헤더는 즉시 렌더링하고, 복잡한 차트나 리스트만 데이터를 기다리게 할 때 사용

// page.tsx
// 페이지의 일부만 비동기 로직을 처리하는 경우
import { Suspense } from "react";
import ProjectDetail from "./ProjectDetail";
import OtherComponent from "./OtherComponent";

export default function ProjectPage() {
  return (
    <>
      <OtherComponent />
      <Suspense fallback={<p>세부 정보 로딩 중...</p>}>
        <ProjectDetail />
      </Suspense>
    </>
  );
}

 

2. Next.js App Router의 `loading.tsx` 파일 활용

• Next.js 13+ App Router부터 컨벤션 기반의 Suspense 설정을 지원한다.
• 특정 라우트 세그먼트(폴더)에 `loading.tsx` 파일을 생성하면 Next.js는 해당 폴더의 `page.tsx` 또는 `layout.tsx`가 데이터를 불러오는 동안 자동으로 `loading.tsx`를 보여준다.
• 이 방법은 전체 페이지나 라우트의 로딩 상태를 관리할 때 유용하다.

// app/@modal/(.)[slug]/page.tsx
// 이 파일은 데이터를 서버에서 비동기로 가져옵니다.
import { ProjectModal } from "@/components/ui/ProjectModal";
import { getProjectBySlug } from "@/lib/projects";
import { notFound } from "next/navigation";

interface ModalPageProps {
  params: { slug: string };
}

export default async function InterceptedProjectModal({
  params,
}: ModalPageProps) {
  const { slug } = await params;
  const project = await getProjectBySlug(slug);

  if (!project) {
    notFound();
  }

  return <ProjectModal project={project} />;
}

// app/@modal/(.)[slug]/loading.tsx
// 데이터를 기다리는 동안 자동으로 보여지는 로딩 컴포넌트입니다.
export default function ModalLoading() {
  return <p>로딩 중...</p>;
}

---

Suspense 적용 화면

1. 적용하기 전

2. 적용 후

---

`loading.tsx` vs `<Suspense>`

• `loading.tsx`
  • 폴더 기반의 Suspense로, 라우트 전환 시 전체 페이지에 대한 로딩 상태를 관리할 때 적합합니다.
  • 코드량이 적고 간편하다는 장점이 있습니다.
• `<Suspense>`
  • 컴포넌트 기반의 Suspense로, 페이지의 특정 부분만 분리하여 로딩 상태를 관리할 때 유용합니다.
  • 이를 통해 부분적인 데이터 로딩과 스트리밍을 구현할 수 있습니다.