Next.js <getStaticProps>

getStaticProps는 빌드 시에만 실행이 된다. yarn build => yarn start 순서로 진행

  **production으로 실행해야한다. dev로 하면 getStaticProps가 매번 실행되서 정적생성효과를 볼 수 없다.

SSG는 요청마다 이미 만들어진 HTML을 사용한다 (네트워크페이지에서 미리 렌더링 된 페이지를 확인 할 수 있다.)

export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

덕분에 빠른 경험을 할 수 있지만 매번 똑같은 페이지를 봐야하며 부정확한 정보가 사용자에게 전달 될 수 있다.

그럴때 사용하는 것이 revaildate이다.

next.js는 ISR방식을 사용해서 정적페이지지만 필요에따라 업데이트된 데이터를 가져와서 볼 수 있는 방식이다.

어떻게 보니 정말 장점만 가지고 온듯하다.. 일단 오늘 공부한 사용법은 아래와 같다.👍

revalidate: 5

이렇게 해놓으면 지정한 초 안에 다시 요청 할 경우 캐시된 HTML을 가져오지만 이 시간이 지났다 하면 다시 서버로 부터 가져와서 최신의 데이터를 보여줄 수 있도록한다.

처음에 요청하게되면 HIT으로 이제 막 가져온 HTML을 보여주지만, 정해놓은 시간이 지나면 STALE로 오래된 데이터라고 바뀐다.

저때 다시 새로고침을 하면 다시 HIT으로 바뀐 새로운 데이터가 가져와진다.

 

공식문서 revalidate를 참고하면 좋을듯!

https://nextjs.org/docs/api-reference/data-fetching/get-static-props#revalidate

Data Fetching: getStaticProps | Next.js

그럼 이런 생각을 했을 수도 있다.

만약 데이터의 유효시간은 지났지만 전의 데이터 값과 똑같으면,,? 불필요하게 다시 서버에서 가져오나?라고 생각할 수 있다.

그럴 때 위의 이미지에서 볼 수 있듯 ETag를 사용한다.

ETag의 값이 바뀌었다면 업데이트가 된 데이터가 있다는 뜻이고 그렇지 않으면 데이터가 일정하므로 기존의 값을 다시 쓰도록 한다.

  **ETag알아두면 좋을듯

사진이라 비교가 이렇게 나오지만

무조건 똑같은 데이터를 가지고 오게끔 코드를 설정하고 나서 새로고침을 아무리 눌러도 cache의 상태값만 hit과 stable의 반복이고

ETag의 값은 계속해서 유지되는 것을 볼 수 있다. ( 이미지로 보면 2l로 나오는 자리 )

즉 next가 알아서 데이터 값이 같으면 유효시간만 다시 설정해주고 값은 기존의 값을 사용한다는 것을 확인 할 수 있다.

 

사용해볼수록 재밌고 난리;;