🏷️ loading.js

파일 이름을 loading.js로 만들어두면, 로딩 상태일 때 자동으로 해당 페이지가 보여진다.

🏷️ Suspense

Suspense는 리액트에서 제공되는 컴포넌트로, 일부 데이터 또는 리소스가 불러와질 때까지 로딩 상태로 처리하여, 대체할 컨텐츠를 표시할 수 있게 해준다.

때문에, 아래와 같은, 데이터를 불러오는 컴포넌트를 감싸는 형식으로 주로 사용된다.

fallback을 입력하면, 로딩 처리 중 보여줄 데이터를 넣을 수 있다.

async function Meals() {
  const meals = await getMeals();

  return <MealsGrid meals={meals} />;
}

<Suspense
  fallback={<p className={classes.loading}>Fetching meals...</p>}
>
  <Meals />
</Suspense>

🏷️ error.js

error.js 파일을 만들면, 에러가 났을 때 보여줄 페이지를 설정할 수 있다.

단, 주의해야 할 점은, 이 파일이 반드시 client component 이어야 한다는 것이다.

"use client";

export default function Error() {
  return (
    <main className="error">
      <h1>An error occurred!</h1>
      <p>Failed to fetch meal data. Please try again later.</p>
    </main>
  );
}

참고로, 다음과 같이 prop으로 error를 받으면, 에러에 대한 상세 정보를 받아올 수 있다.

"use client";

export default function Error({error}) {
  return (
    <main className="error">
      <h1>An error occurred!</h1>
      <p>{error}</p>
    </main>
  );
}