[Next.js] fallback속성

Next.js의 fallback 속성은 동적 라우팅(Dynamic Routing)을 구현할 때 사용되는 속성입니다. 이 속성을 true로 설정하면

존재하지 않는 경로로의 요청에 대해 Next.js는 자동으로 임시 대체 콘텐츠를 생성합니다.

일반적으로 Next.js에서 정적 경로는 빌드 시점에 사전 렌더링(pre-rendering)되어 생성되는데, 이는 많은 정적 페이지가 존재하는 웹 사이트에 적합합니다.

그러나 동적 경로는 빌드 시점에 미리 알 수 없으므로, 존재하지 않는 동적 경로에 대한 요청을 처리하는 방법이 필요합니다.

이때 fallback 속성을 사용하면 존재하지 않는 동적 경로에 대한 요청에 대해 Next.js가 다음과 같은 동작을 수행합니다.

1. 요청이 발생하면 Next.js는 서버에서 요청을 처리하여 임시 페이지를 생성합니다. 이 임시 페이지는 실제 데이터가 아닌, "로딩 중" 또는 "데이터를 가져오는 중"과 같은 플레이스홀더 콘텐츠를 포함합니다.

2. 동적 경로에 해당하는 데이터가 로드되면 Next.js는 클라이언트에게 새로운 데이터로 페이지를 업데이트합니다. 이때 사용자는 로딩 중인 페이지를 볼 수 있으며, 페이지가 업데이트되는 동안 로딩 상태가 표시됩니다.

fallback={true}를 사용하여 동적 경로를 처리하려면, 다음과 같이 getStaticPaths 또는 getServerSideProps 메서드와 함께 사용해야 합니다.

// 예시: [id].js 파일

import { useRouter } from 'next/router';

const Post = ({ post }) => {
  const router = useRouter();

  // 동적 경로에 대한 데이터 로딩 중인 경우, 로딩 상태를 표시
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  // 동적 경로에 해당하는 데이터로 페이지 렌더링
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticPaths() {
  // 동적 경로 목록 반환
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } },
      // ...
    ],
    fallback: true, // fallback 속성 설정
  };
}

export async function getStaticProps({ params }) {
  // 동적 경로에 해당하는 데이터 로드
  const post = await fetchPostById(params.id);

  // 로드된 데이터를 props로 전달
  return {
    props: {
      post,
    },