inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 입 크기로 잘라먹는 Next.js

5.3) 풀 라우트 캐시 3. 동적 경로에 적용하기

동적페이지 풀라우트 캐시 질문 있습니다.

104

hinpuo

작성한 질문수 6

0

강의에서 book/4는 동적 페이지인데 첫 접속 후 Full Route Cache에 저장되어 두 번째 접속이 빨라진다고 했습니다. 동적 페이지는 Full Route Cache에 저장되지 않는다고 배웠는데 왜 적용되나요? .next 폴더에 해당 페이지가 남아있는 것을 확인했는데, 이것이 Full Route Cache 적용을 의미하나요? npm run start로 프로덕션 모드에서 테스트했는데 첫 접속과 두 번째 접속 모두 170ms로 동일합니다. 왜 속도 차이가 없나요?

import { notFound } from "next/navigation";
import style from "./page.module.css";
import { BookData } from "@/types";

// export const dynamicParams = false;

export function generateStaticParams() {
  return [{ id: "1" }, { id: "2" }, { id: "3" }];
}

export default async function Page({
  params,
}: {
  params: Promise<{ id: string | string[] }>;
}) {
  const { id } = await params;

  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${id}`
  );
  if (!response.ok) {
    if (response.status === 404) {
      notFound();
    }
    return <div>오류가 발생했습니다...</div>;
  }
  const book: BookData = await response.json();

  const { coverImgUrl, title, subTitle, author, publisher, description } = book;

  return (
    <div className={style.container}>
      <div
        className={style.cover_img_container}
        style={{ backgroundImage: `url('${coverImgUrl}')` }}
      >
        <img src={coverImgUrl} />
      </div>
      <div className={style.title}>{title}</div>
      <div className={style.subTitle}>{subTitle}</div>
      <div className={style.author}>
        {author} | {publisher}
      </div>
      <div className={style.description}>{description}</div>
    </div>
  );
}



🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)

react typescript next.js 카카오공채-개발

답변 2

0

이정환 Winterlood

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

book/4 는 동적 페이지(Dynamic Page)가 아닌 동적 경로에 해당하는 페이지입니다. generateStaticParams에서 내보내주지 않았기 때문에 첫 접속시에는 동적 페이지로 생성되지만, 생성 이후에는 정적 페이지(Static Page)로 동작하여 Full Route Cache에 보관됩니다.

 

npm run start로 프로모션 모드에서 테스트 하셨을 때에는 혹시 캐시 폴더를 초기화 한 상태로 실험해 보셨을까요?! 캐시는 한번 보관되면 쭉 남아 있을 수 있기에 정확한 응답 시간을 테스트 하시려면 캐시를 초기화 하신 상태에서 실험해 보셔야 합니다.

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. hinpuo님.

Next.js의 동적 페이지를 처리하는 과정에서 풀라우트 캐시와 관련하여 질문해 주셨군요. 주제에 대한 이해를 돕기 위해 간략히 설명드리겠습니다.

동적 페이지와 캐시의 차이점

  1. 동적 페이지 (Dynamic Page):

    • 일반적으로 모든 요청마다 서버에서 새롭게 페이지를 생성합니다. 하지만 Next.js에서는 ISR (Incremental Static Regeneration)이라는 기능을 통해 동적 페이지도 정적으로 성능을 최적화할 수 있습니다. 이는 풀라우트 캐시와는 별도의 임시 스테이징입니다.
  2. 풀라우트 캐시:

    • 정적 페이지의 경우, 빌드 시점에 캐시된 HTML 파일을 제공합니다. 이는 동적 페이지에는 적용되지 않습니다.

동적 페이지에서의 캐싱 효과

  • 동적 페이지에서 느껴지는 속도 향상은 페이지 출력 이후 브라우저가 해당 데이터를 캐시하여 발생할 수 있습니다. 특정 요청 시점의 페이지 응답시간(170ms)과 같은 경험은 브라우저와 서버 사이의 연결 상태와 관련이 있을 수 있습니다.
  • 두 번째 접속 시 속도가 빨라진다면, 브라우저의 HTTP 캐시CDN 캐시 등의 영향을 받을 수 있습니다. 이는 네트워크 레벨에서 이루어지며, 서버에서의 캐시가 아님을 유의해야 합니다.

관련 질문 및 자료

본 주제를 더 깊이 이해하려면 다음 링크에서 유사한 질문과 답변을 참조하시면 도움이 될 것입니다:
- Full route cache 질문있습니다.
- 안녕하세요, 5.3)풀라우트 캐시 3. 동적경로에 적용하기 질문

이해가 안 되는 부분이나 추가적인 질문이 있으시면 편하게 질문해 주세요. 지식공유자께서 곧 답변을 제공해 주실 것입니다.

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

풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문

0

58

2

next.js 프로젝트

0

55

1

Next.js + Tanstack Query BFF 구조 질문

1

54

2

Next.js 사전렌더링 이해하기 부분

0

56

2

모달 관련 질문

0

60

3

렌더링 관련 질문

0

92

2

중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화

0

78

2

라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.

0

76

2

SSR시 context에 params말고 query를 사용하면 안되나요?

0

91

2

npx prisma db push 시 에러가 뜹니다.

0

111

3

vercel 배포를 실패하였습니다.

0

124

3

Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?

0

75

2

getServerSideProps 함수와 SSR의 관계

0

90

6

없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다

0

71

2

실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.

0

128

2

일반적인 nextjs project architecture에 대하여..

0

97

2

2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?

0

83

2

배포 시 오류 발생

0

98

2

백엔드 서버 오류납니다.

0

97

2

취약점 제거시 nestjs 버전 문제가 생길까요?

0

104

1

eslint.config.mjs 내 rules 어떻게 설정 하나요?

0

115

1

[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.

0

69

2

빨간줄 설정

0

91

2

익스텐션 질문

0

67

1