inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

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

139

박재호

작성한 질문수 3

0

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

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


그렇다면 ,

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

react typescript next.js

답변 2

0

이정환 Winterlood

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

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

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

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

0

박재호

빠른 답변 감사합니다.

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

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

0

이정환 Winterlood

네 정확히 맞습니다!

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

0

인프런 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 또는 동적 생성됩니다. 이후 페이지가 서버에 의해 캐시될 수 있지만, 이는 초기 요청 이후의 결과입니다.
  • 동적 페이지로 생성된 후, 조정 가능한 캐싱 전략을 통해 그 이후의 요청에 대해 더 효율적으로 제공될 수 있습니다.

관련 참고 자료

동일한 주제에 대해 다른 유사한 질문과 답변이 있습니다. 이러한 설명들은 추가 연구에 도움이 될 것입니다:

이 내용이 궁금증 해소에 도움이 되었으면 좋겠습니다. 추가적으로 궁금한 점이 있으시다면 언제든지 질문해 주세요. 곧 지식공유자께서도 답변해 주실 것입니다.

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

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

0

18

1

모달 관련 질문

0

30

3

렌더링 관련 질문

0

76

2

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

0

59

2

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

0

60

2

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

0

73

2

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

0

91

3

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

0

93

3

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

0

54

2

getServerSideProps 함수와 SSR의 관계

0

76

6

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

0

58

2

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

0

112

2

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

0

83

2

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

0

71

2

배포 시 오류 발생

0

83

2

백엔드 서버 오류납니다.

0

79

2

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

0

89

1

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

0

102

1

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

0

60

2

빨간줄 설정

0

74

2

익스텐션 질문

0

58

1

강의 들으면서 궁금한 부분 질문드립니다.

0

108

1

서버 배포 에러입니다.

1

97

2

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

1

102

2