풀 라우트 캐시1 질문

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

5.1) 풀 라우트 캐시 1

해결된 질문

24.10.06 12:28 작성

Dynamic Page로 설정되는 기준 중에서 동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을때가 있다고 말씀해주셨습니다.

그리고 웬만하면 Static Page로 만드는 것이 성능 측면에서 좋다고 하셨습니다.

하지만 예를 들어, 거의 모든 페이지에서 header나 footer 컴포넌트를 공통 컴포넌트로 쓰고있고, 그 컴포넌트에서 쿠키를 통해 어떤 값을 세팅한다면 Static Page는 거의 없을 것으로 판단이 되는데 따로 해결방안이 있을까요?

Dynamic Page로 설정되는 기준 중에서 아래와 같이 캐시되지 않는 data fetching을 사용하는 경우가 있다고 하셨는데
```
async function Comp() {
  const response = await fetch('...')
  return <div>...</div>
}
```
```
async function Comp() {
  const response = await fetch('...', {cache : "no-store"})
  return <div>...</div>
}
```
아래와 같이 revalidate로 캐시 옵션이 세팅되었을때는 Static Page로써 적용이 되는 것이지요?
그 이유가 해당 time이 지났을때는 데이터캐시에 있는 값이 stale되었다고 판단이 되어 캐싱되어있는 값을 가져오지않고 새로운 값을 가져오기 때문이라고 보면 되는걸까요?
```
async function Comp() {
  const response = await fetch('...', {
    next: { revalidate: 3 } 
  })
  return <div>...</div>
}
```

react typescript next.js

답변 3

이정환 Winterlood

지식공유자

2024. 10. 07. 10:06

안녕하세요 이정환입니다. 순서대로 답변드릴게요 😃

우선 동적 함수에 포함되는 헤더 는 Header 컴포넌트를 말하는 것이 아닙니다. HTTP Request의 Header 필드의 값을 말하는 것 이었어요 따라서 해당 부분은 걱정하지 않으셔도 됩니다. 추가로 서버컴포넌트에서는 쿠키 값을 읽어 올 수는 있으나 설정할 수는 없습니다. 우리 강의에서는 쿠키를 활용하지 않았으므로 자세히 설명드리지는 않았는데요 이런 제약이 존재하여 보통은 미들웨어를 통해 쿠키값을 설정하곤 합니다. 미들웨어에 대해서는 다음 공식문서를 참고해보시기를 권장드립니다.

https://nextjs.org/docs/app/building-your-application/routing/middleware

두번째 질문에 대한 답변으로는 우리 강의의 5.1) 풀 라우트 캐시 1의 11분 30초 경에 설명드린 것 처럼 revalidate Time이 설정된 Fetch는 페이지를 Dynamic하게 만들지 않습니다. 그 이유에 대해서도 강의중 설명하고 있으니 해당 부분을 참고해보시면 좋을 것 같습니다.

gga01075

질문자

2024. 10. 06. 12:56

앗 다음 강좌를 보니 1번에 대한 답변은

리액트에서 제공해주는 Suspense컴포넌트를 통해서 사전렌더링 과정에는 포함되지않고 클라이언트 측에서만 실행되도록 해주고있네요

인프런 AI 인턴

2024. 10. 06. 12:31

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

Next.js의 풀 라우트 캐시와 관련한 질문에 대해 답변 드리겠습니다.

1. Dynamic Page 설정과 Static Page로의 전환

Next.js에서 Dynamic Page로 분류되는 요소 중 하나는 쿠키, 헤더, 쿼리 스트링 등 사용자에 따라 변동 가능한 값을 사용하는 경우입니다. 문제는 거의 모든 페이지에서 공통 요소로 사용되는 header나 footer에서 쿠키를 사용하여 값을 설정할 때 이 경우에 속할 수 있다는 것입니다. 이로 인해 정적 페이지로 만들기 어렵다고 느끼실 수 있습니다.

해결 방안:
- getStaticProps를 사용하는 조건부 랜더링: 필요하다면 특정 부분을 클라이언트에서 실행하도록 하고, 최대한 서버에서 미리 데이터를 준비해 놓습니다.
- 쿠키의 SSR 처리: 쿠키는 일반적으로 서버 측에서 처리하여 getServerSideProps를 사용하여 데이터를 핸들링합니다. 클라이언트가 아닌 서버에서 처리하도록 구조를 변경하면 정적 컴포넌트로 사용 가능할 수 있습니다.

2. 캐싱되지 않는 Data Fetching과 Revalidation

Next.js에서는 데이터를 가져올 때 ‘cache: “no-store”’ 옵션을 사용하면 캐싱하지 않고 항상 최신 데이터를 가져옵니다. 따라서 동적 페이지로 분류됩니다.

반면, revalidate 옵션을 사용하게 되면 일정 시간 동안은 저장된 캐시 데이터를 사용하고, 지정된 시간이 지나면 데이터를 새로 받아와 정적 페이지로 생성합니다. 이는 데이터를 받은 후 일정 시간이 지나면 데이터가 오래되었다고 판단하여 최신 데이터를 다시 페칭하는 방식으로 동작합니다.

revalidate 사용 시: 설정된 시간 이후에 stale된 것으로 간주하고, 새로운 데이터를 서버에서 가져와 써야할 경우 정적 페이지처럼 동작할 수 있습니다.

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