인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

dynamic 옵션을 "auto"로 설정하시면 dynamic 옵션을 설정하지 않은 것과 동일하게 동작합니다. 따라서 해당 페이지를 이루는 컴포넌트 중 동적 함수를 사용하거나 캐싱되지 않는 API 호출이 있을 경우 동적 페이지로, 그렇지 않을 경우 정적 페이지로 설정됩니다.

그러나 보내주신 코드로만 보았을 때에는 정적 페이지로 설정될 것 같은데, 동적 페이지로 설정되는 이유는 잘 모르겠네요 전체 프로젝트의 코드를 확인해 봐야 할 것 같습니다. layout이나 기타 컴포넌트에 원인이 있을 것 같아요

전체 프로젝트 코드를 보내주실 때에는 깃허브 링크나 구글 드라이브 링크로 보내주세요

import BookItem from "@/components/book-item";
import style from "./page.module.css";
import { BookData } from "@/types";

export const dynamic = "auto";

async function AllBooks() {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`,
    { cache: "force-cache" }
  );

  if (!response.ok) {
    return <div>오류 발생 🚨</div>;
  }
  const allBooks: BookData[] = await response.json();

  return (
    <section>
      <h3>등록된 모든 도서</h3>
      {allBooks.map((book) => (
        <BookItem key={book.id} {...book} />
      ))}
    </section>
  );
}

async function RandomBooks() {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/random`,
    { next: { revalidate: 3 } }
  );
  if (!response.ok) {
    return <div>오류 발생 🚨</div>;
  }
  const randomBooks: BookData[] = await response.json();

  return (
    <section>
      <h3>지금 추천하는 도서</h3>
      {randomBooks.map((book) => (
        <BookItem key={book.id} {...book} />
      ))}
    </section>
  );
}

export default function Home() {
  return (
    <div className={style.container}>
      <RandomBooks />
      <AllBooks />
    </div>
  );
}

동적 함수도 없고 캐싱이 안되는 코드도 없는데 왜 Next는 빌드때 이 페이지를 동적인 페이지로 분류하는걸까요?

안녕하세요, 인프런 AI 인턴입니다. 어차피 마늘님.

Next.js에서는 export const dynamic = "auto";로 설정할 경우, 페이지는 기본적으로 Next.js가 해당 페이지를 정적으로 생성할지, 동적으로 생성할지를 자동으로 결정하게 됩니다. 이 방식은 페이지의 데이터 페칭 메소드(getStaticProps, getServerSideProps, etc.) 혹은 사용자의 요청을 기반으로 동적으로 결정됩니다.

dynamic: "auto"는 기본적으로 다음과 같이 동작합니다:

• 정적 최적화 가능 여부: 특정 페이지가 고객의 요청과 관계없이 정적으로 최적화 될 수 있는지 평가합니다.
  
• 사용자 요청에 기반한 동적 생성: 특정 데이터나 API 호출이 페이지 로드 시 필요하다면, 동적으로 생성될 수 있습니다.
  

따라서 페이지가 정적으로 빌드되었음에도 불구하고 동적으로 설정된 것이다는 것은 Next.js가 특정 조건에 의해 페이지가 동적으로 생성되는 것을 자동으로 결정했을 가능성이 있습니다.

참고 링크

이와 관련된 자세한 설명은 다음의 게시물을 참고하시면 도움이 될 것입니다:

• Next.js의 동적 페이지 설정에 대한 기본 개념
  

위의 설명이 상황 이해에 도움이 되기를 바랍니다. 추가적으로 혹시 다른 문제가 있거나 더 궁금한 점이 있으면, 이어서 질문해 주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.