⏳ Next.js에서 로딩 상태 처리하기 (loading.js & Suspense)

Next.js에서는 페이지나 컴포넌트가 데이터를 비동기로 불러올 때, 사용자에게 로딩 상태를 보여줄 수 있도록 로딩 페이지를 제공한다.

---

기본 방식: loading.js 파일

loading.js(loading.tsx)을 사용하면, 로딩 UI를 지정할 수 있다.

• app/폴더에서 사용하는 방식
• 해당 폴더 내 page.js가 비동기로 데이터를 가져올 경우,
• 같은 위치의 loading.js가 자동으로 렌더링된다.

// app/meals/loading.js
import classes from "./loading.module.css";

export default function MealsLoadingPage() {
  return <p className={classes.loading}>Fetching meals...</p>;
}

위치에 따른 우선순위

• app/loading.js → 모든 페이지에 적용되는 전역 로딩
• app/meals/loading.js → /meals 하위에서만 적용

  폴더 구조 기반으로 가장 가까운 로딩 페이지가 우선적으로 적용됨!

---

🤔 문제점: 전체 페이지가 로딩되는 건 사용자 경험이 떨어짐

데이터 하나 불러오는데 전체 화면이 로딩으로 바뀐다면?
❌ 헤더나 버튼, 설명까지 전부 로딩처럼
❌ 깜빡이는 느낌
❌ UX 저하

---

✅ 해결책 : Suspense로 부분 로딩 처리

리액트의 <Suspense> 컴포넌트를 사용하면, 로딩이 필요한 일부 UI만 로딩 처리하고 나머지는 바로 보여줄 수 있다.

import { Suspense } from "react";
import MealsGrid from "@/components/meals/meals-grid";
import { getMeals } from "@/lib/meals";

async function Meals() {
  const meals = await getMeals();
  return <MealsGrid meals={meals} />;
}

export default function MealsPage() {
  return (
    <>
      <header>...헤더 콘텐츠...</header>
      <main>
        <Suspense fallback={<p>Loading meals...</p>}>
          <Meals />
        </Suspense>
      </main>
    </>
  );
}

Meals컴포넌트가 데이터를 가져오는 동안, <Suspense>의 fallback 이 대신 보여지고
헤더나 기타UI는 그대로 유지된다.

fallback은 비동기 컴포너느가 로딩 중일 때 대신 보여줄 UI를 지정하는 속성이다.

---

💡 이게 뭔데?

"Suspense & Streamed Response"를 이용한 세분화 로딩 처리"라고 부른다.

즉, 일부 콘텐츠는 바로 렌더링하고,
나머지는 준비되면 지켜보다가(스트리밍) 이어서 로딩하는 것!!

---

부분 로딩 UX를 구현해 사용자에게 더 나은 경험을 제공할 수 있을 것 같다.