강의

N
챌린지

멘토링

N
클립

커뮤니티

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

박주연님의 프로필 이미지
박주연

작성한 질문수

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

5.2) 풀 라우트 캐시 2

[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache

작성

·

27

·

수정됨

0

안녕하세요. 수업을 듣다가 알려주신 거랑 다르게 동작하는 것 같아 질문드립니다.
5.2 풀라우트 캐시2 스크립트 기준 10:09
"자, 이런 Fetch 메서드는 자동으로 No Store 옵션을 갖는다고 말씀을 드렸죠?"
-> 그래서 예상한 결과값은 dynamic page를 예상했는데 static page로 나오는 것 같습니다


npm run build를 했을 때
cache 옵션을 안 준 경우

  const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`)

Route (app)                                 Size  First Load JS    
┌ ○ /                                      288 B         106 kB

이렇게 static page로 나오고

cache 옵션 no-store로 준 경우

Route (app)                                 Size  First Load JS    
┌ ƒ /                                      288 B         106 kB

이렇게 dynamic page로 나와서

next 공식 문서를 찾아보니
https://nextjs.org/docs/15/app/api-reference/functions/fetch

auto no cache (default): Next.js fetches the resource from the remote server on every request in development, but will fetch once during next build because the route will be statically prerendered. If Dynamic APIs are detected on the route, Next.js will fetch the resource on every request.
이렇게 build 때는 static 이라고 해서 질문이 생겼습니다.

어떤 블로그에서는 또 브라우저마다 다르게 동작한다고 해서 헷갈립니다..!


답변 주시면 감사드리겠습니다.


reacttypescriptnext.js

답변 2

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 박주연님 이정환입니다.

15 버전의 최신 버전으로 확인해보니, 이 버전에서는 말씀해주신대로 cache 옵션이 없는 fetch가 페이지를 Dynamic 페이지로 전환시키지 않는군요

강의를 제작하는 시점에서는 분명히 영상에서 보여드렸던 것 처럼 "no-store" 옵션이 적용된 것과 동일하게 동작하여 페이지를 Dynamic 페이지로 전환시켰는데 버전 차이로 인해 뭔가 변화가 발생한 것으로 보입니다. 결과적으로는 직접 확인하신 결과가 맞습니다.

이 부분은 최대한 빠르게 최신화 해 두도록 하겠습니다. 그나저나 auto no cache로 동작한다고 하면서 페이지를 Dynamic 페이지로 전환시키지 않는 동작방식은 다소 아이러니 하네요...

박주연님의 프로필 이미지
박주연
질문자

답변 주셔서 감사합니다!

0

인프런 AI 인턴님의 프로필 이미지
인프런 AI 인턴

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

Next.js의 fetch 메서드와 관련된 동작에 대해 문의 주셨네요. 질문의 핵심은 fetch의 기본 cache 옵션이 어떻게 동작하는가에 대한 부분입니다.

Next.js에서의 fetch 동작

Next.js에서 fetch 메서드를 사용할 때, 기본적으로 여러 상황에 따라 동작 방식이 달라질 수 있습니다.

  1. 개발 모드와 빌드 모드의 차이:

    • 개발 환경에서는 매 요청마다 데이터를 새로 가져오는 경향이 있습니다. 그러나 빌드 시점에는 경로가 정적으로 미리 렌더링되므로 해당 데이터를 캐싱합니다. 이것이 builder 시점에는 한 번만 데이터를 페칭할 수 있도록 하는 이유입니다.

  2. 자동 캐싱과 cache 옵션:

    • 기본적으로 Next.js의 fetch는 노캐시 설정이지만, 빌드 시점에서는 해당 경로가 정적으로 생성됩니다. 즉, next build 시점에 단일 요청 후 정적 페이지로 생성될 수 있습니다.
    • 해당 페이지가 정적으로 미리 렌더링되기 때문에 빌드 이후에는 페이지가 정적(Static)으로 표시됩니다.
    • 그러나 no-store 옵션을 명시적으로 부여하면, 빌드 후 매번 새로운 데이터를 가져오도록 설정하는 것입니다. 이에 따라 해당 페이지는 동적(Dynamic) 페이지로 처리됩니다.

  3. 브라우저에 따른 차이:

    • 각기 다른 브라우저 별로 캐시 동작 방식의 차이로 인해 경험의 차이를 느낄 수 있습니다. 그러나 Next.js에서 서버 사이드에서의 빌드 동작과는 무관합니다.

추가 참고 자료

이와 관련된 주제에 대해 추가적으로 이해를 돕기 위해 관련 링크를 첨부해 드리겠습니다:

현재 Next.js의 fetch 동작은 시간이 지나면서 업데이트될 수 있는 점 염두에 두시길 바랍니다. 따라서 항상 최신 공식 문서를 참고해주시기 바랍니다.

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

박주연님의 프로필 이미지
박주연

작성한 질문수

전체 Q&A
질문하기