[Next.js] Next.js에서 Suspense 사용

1. Suspense란 무엇인가?

React의 Suspense는 데이터가 준비될 때가지 기다리지 않고, 로딩 UI를 먼저 보여주는 기능

• 전통적인 방식: 데이터가 다 준비될 때까지 화면이 “텅 빈 상태” → UX에 나쁨
• Suspense: 화면의 뼈대(레이아웃)는 먼저 보여주고, 데이터가 준비되면 그 부분만 채워 넣음 → UX 좋아짐

즉, 로딩을 제어하는 React의 도구이다.

---

Next.js와 Suspense의 관계

Next.js는 기본적으로 서버 컴포넌트(Server Components) 기반이다.

• 데이터 패칭은 서버에서 처리
• React의 Suspense와 결합 → 스트리밍 렌더링(Streaming Rendering) 가능

※ 사용자는 페이지가 완전히 준비되기 전에 부분적으로라도 화면을 볼 수 있다!

---

기본 사용 예시

// app/posts/page.js
import { Suspense } from "react";

async function PostsList() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default function PostsPage() {
  return (
    <div>
      <h2>게시글</h2>
      <Suspense fallback={<p>🌀 게시글 불러오는 중...</p>}>
        <PostsList />
      </Suspense>
    </div>
  );
}

✅ 동작 과정

1. PostsPage가 렌더링될 때, PostsList 데이터는 아직 준비되지 않음
2. 대신 fallback={<p>🌀 게시글 불러오는 중...</p>} UI가 먼저 출력
3. 데이터가 준비되면 실제 게시글 목록이 화면에 채워짐

---

병렬 로딩 (Parallel Suspense)

대시보드처럼 여러 데이터 블록이 있을 때, 각 블록이 준비되는 순서대로 보여줄 수 있다.

import { Suspense } from "react";

async function Stats() {
  await new Promise(r => setTimeout(r, 2000));
  return <div>📊 통계 데이터</div>;
}

async function News() {
  await new Promise(r => setTimeout(r, 4000));
  return <div>📰 최신 뉴스</div>;
}

export default function DashboardPage() {
  return (
    <div>
      <h2>대시보드</h2>

      <Suspense fallback={<p>통계 불러오는 중...</p>}>
        <Stats />
      </Suspense>

      <Suspense fallback={<p>뉴스 불러오는 중...</p>}>
        <News />
      </Suspense>
    </div>
  );
}

✅ 결과:

1. 2초 후 → 통계 먼저 표시
2. 4초 후 → 뉴스 표시
3. 전체가 한 번에 뜨는 게 아니라, 준비된 것부터 점진적으로 스트리밍

---

loading.js와의 차이

• loading.js: 라우트 전체 로딩 상태 제어 (자동 Suspense fallback 역할)
• <Suspense fallback>: 특정 컴포넌트 단위 로딩 상태 제어

즉, 페이지 진입 시 초기 로딩은 loading.js, 페이지 안에서 부분별 로딩은 Suspense로 나눠 쓰는게 일반적이다.

---

실무 활용 포인트

1. 사용자 경험(UX) 개선
2. → 긴 로딩을 기다리는 대신, 준비된 부분부터 보여줄 수 있음.
3. 대시보드, 피드, 게시판 같은 UI에 최적
4. → 여러 컴포넌트가 서로 다른 속도로 데이터를 불러올 때 유용.
5. SEO에도 유리
6. → 서버에서 스트리밍으로 HTML을 내려주므로 검색 엔진도 일부라도 콘텐츠를 빠르게 인덱싱 가능.

---

✅ 정리

• Suspense = 데이터 준비 전 fallback UI 보여주는 React 기능
• Next.js(App Router)에서 서버 컴포넌트와 결합 → 스트리밍 렌더링 지원
• loading.js는 라우트 단위, Suspense는 컴포넌트 단위
• 실무에서는 둘을 함께 활용해서 UX를 개선