안녕하세요, 5.3)풀라우트 캐시 3. 동적경로에 적용하기 질문

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

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

작성

안녕하세요, 정환님 궁금한게 있습니다.

동적 경로를 갖는 page.tsx 파일 안에 generateStaticParams 라는 함수를 설정하게되면, 경로에 해당하는 모든 페이지는 모두 Static Page로 만들어지는 것으로 알고 있습니다.
return하지 않은 URL Parameter를 갖는 페이지에 대해서도 동일하다고 봤었는데요

그렇다면 ,

도서 id999번까지 있다고 가정해볼게요
return [{id:"1"}] 이렇게만 작성해도 999번까지 static page가 되는게 맞을까요 ?

react typescript next.js

답변 2

이정환 Winterlood

지식공유자

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

아뇨 return 하지 않은 URL 파라미터에 대해서는 빌드 타임에 정적으로 페이지가 생성되지 않습니다.

따라서 return [{id:"1"}] 이렇게 작성하시면 1번 페이지만 Static 페이지로 빌드 타임에 생성됩니다.

다만 dynamicParams의 값을 true로 설정하신 경우, 런타임에도 접속 요청을 받은 Static 페이지를 실시간으로 생성하게 됩니다.

박재호

질문자

빠른 답변 감사합니다.

dynamicParams의 값을 true로 설정
-> "런타임에 접속 요청을 받은 Static 페이지를 실시간으로 생성한다"라는 표현은,

빌드 시점에 미리 만들지 않은 경로에 대해 사용자가 요청을 보내면 그 순간에 서버에서 HTML을 생성(=SSR)하고, 그 결과를 캐시에 ‘정적 파일’처럼 저장해 둔 뒤 다음 요청부터는 캐시된 HTML만 꺼내 쓰는 방식을 의미하는것이 맞을까요?

이정환 Winterlood

지식공유자

네 정확히 맞습니다!

마치 SSG의 fallback: "blocking" 처럼 동작한다고 생각하시면 됩니다!

인프런 AI 인턴

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

Next.js에서 generateStaticParams 함수와 풀라우트 캐시(Full Route Cache)에 대해 질문 주셨군요. 이와 관련하여 자세히 설명드리겠습니다.

`generateStaticParams`의 작동 방식

generateStaticParams는 Next.js에서 사전 정의된 페이지만을 정적으로 생성하기 위한 함수입니다. 예를 들어, 특정 id에 대해서만 사전 렌더링을 원할 경우, 해당 id를 generateStaticParams 함수에서 반환합니다.

export async function generateStaticParams() {
  return [{ id: '1' }];
}

위의 코드와 같이 설정된 경우, id가 ‘1’인 페이지는 정적으로 생성됩니다. 반면, 이 함수를 통해 반환되지 않은 id(예: id ‘2’부터 ‘999’까지)는 정적으로 생성되지 않으며, 최초 요청 시 동적으로 생성됩니다. 이후에는 캐싱을 통해 정적으로 제공될 수 있으나, 초기에는 동적 페이지로 취급됩니다.

중요한 점

generateStaticParams에서 반환되지 않은 id는 최초 요청 시 SSR 또는 동적 생성됩니다. 이후 페이지가 서버에 의해 캐시될 수 있지만, 이는 초기 요청 이후의 결과입니다.
동적 페이지로 생성된 후, 조정 가능한 캐싱 전략을 통해 그 이후의 요청에 대해 더 효율적으로 제공될 수 있습니다.

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