데이터 캐시

데이터 캐시?

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

적용하기

Fetch 메서드에 cache, next 옵션을 설정하면 Next.js가 해당 요청을 어떻게 캐싱할지 결정한다.

const response = await fetch(`~/api`, { cache: 'force-cache' });
									  { cache: 'no-store' }
									  { next: { revalidate: 10 } }
          							  { next: { tags: ['a'] } }

이러한 데이터 캐시의 옵션들은 Fetch가 아닌 Axios등의다른 HTTP리퀘스트 라이브러리에서는 활용할 수 없다.

Next.js에서 제공되는 Fetch메서드는 일반적인 Fetch메서드가 아닌 Next.js가 자체적으로 데이터 캐시와 관련된 여러가지 기능들을 덧붙여 놓은 일종의 확장판 개념의 메서드이기 때문이다.

cache 옵션

• "force-cache" (v15 이전 기본값)
  • 요청의 결과를 무조건 캐싱함
  • 한 번 호출된 이후에 다시는 호출되지 않음
    
• "no-store" (v15 이후 기본값)
  • 데이터 패칭의 결과를 저장하지 않는 옵션
  • 캐싱을 아예 하지 않도록 설정하는 옵션
    

next 옵션

• { revalidate: 3 }
  • 특정 시간을 주기로 캐시를 업데이트 함
  • 마치 Page Router의 ISR 방식과 유사함
    
• { tags: ['a'] }
  • On-Demand Revalidate
  • 요청이 들어왔을 때 데이터를 최신화 함