[Next.js] (8) - Data Cache

👉 Data Cache

• fetch 메서드를 활용해 불러온 데이터를 Next서버에서 보관하는 기능
• 영구적으로 데이터 보관, 특정 시간을 주기로 갱신 시키는 것 가능
• 불 필요한 데이터 요청 수를 줄여서 웹 서비스의 성능 크게 개선 가능

const response = await fetch('/api',{ cache: "force-cache" });
//요청의 결과를 캐싱함, 한 번만 불러옴
//next.js 에서 fetch 라는 메서드만 사용해야함

const response = await fetch('/api',{ cache: "no-store" });
//데이터 페칭의 결과를 저장하지 않는 옵션
//캐싱을 아예 하지 않도록 설정하는 옵션

const response = await fetch('/api',{ next: { revalidate: 3 } });
//Page Router의 ISR 기능과 유사함
//특정 시간을 주기로 캐시를 업데이트

const response = await fetch('/api',{ next: { tag: ['a'] } });
//On-Demand Revalidate
//요청이 들어왔을 때 데이터를 최신화 함

no-store

force-cache

revalidate

 

• next 폴저에 저장된 cache 데이터 확인 가능

 

• nextConfig 파일에 logging, fetches 값을 추가해주면 서버 로깅가능 (ex: cahce skip)

const nextConfig: NextConfig = {
  /* config options here */
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

 

 

 

출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard

한 입 크기로 잘라먹는 Next.js(15+) 강의 | 이정환 Winterlood - 인프런