☂️ Revalidation

Re(다시) + Validation(검증) => 유효기간이 지난 낡은 데이터를 다시 유효한 Fresh 상태로 만드는 재검증의 과정

🌂 SWR

Stale (상한) + While (~하는 동안) + Revalidate (재검증)
=> 상한거 먼저 보여주는 동안 새거 준비!

---

☂️ ISR

I === Incremental (점진적)
S === Static (정적)
R === Regeneration (재생성)

=> 전체 사이트를 다시 빌드하지 않고 유효기간이 지난 페이지만 백그라운드에서 살짝 빌드하는 혁신적 기술.
=> 수정된 페이지만 살짝 교체 가능!!

적용 방법

🌂 next의 fetch의 revalidate 옵션

const res = await fetch('url', {
  next: { revalidate: 3 }
})

=> 주의 점: 옵션을 줄 때 초 단위기 때문에 헷갈리지 않기!

🌂 Route Segment 설정

• next의 fetch를 사용할 수 없고, Prisma 또는 Axios 같은 라이브러리로 DB에 직접적으로 접근 또는 데이터를 fetch 해야 하는 상황이라면 사용 가능.

• 페이지 레벨 제어. (페이지 하위의 모든 request를 같은 주기로 일괄 적용)

  import ... from ...
  
  export const revalidate = 3;  // 마찬가지로 초 단위 설정
  
  export default function Page() {
  ...
  }

---

☂️ 렌더링 전략 비교

☔ 동적 렌더링

• 검색 결과 / 장바구니 / 마이 페이지 / etc
  • 항상 최신 데이터가 필요하고 사용자 마다 결과가 달라야 하는 곳.
    (실시간 데이터, 개인화)

☔ 정적 렌더링

• 회사 소개 / 이용 약관 / 블로그 글 / etc
  • 한번 빌드시 변함이 거의 없고 속도가 최우선인 곳.
  • force-cache 옵션을 사용.

☔ ISR

• 상품 목록 / 뉴스 / 베스트 셀러 / etc
  • 데이터가 바뀌긴 하지만 성능과 최신성 사이의 균형이 중요한 곳.