NextJS data fetch (cache)

Data Fetching: Incremental Static Regeneration (ISR)

Data Fetching: Incremental Static Regeneration (ISR)

Learn how to create or update static pages at runtime with Incremental Static Regeneration.

주요 내용

1. 캐싱의 목적
• 캐싱은 데이터가 매번 요청될 때마다 다시 가져오는 것이 아니라,
• 이전에 가져온 데이터를 재사용할 수 있게 해줌.
• → 페이지 로딩 속도가 빨라지고 서버의 부하가 줄어듦
 

2. fetch의 cache 옵션
• fetch 함수에서 cache 옵션을 사용하여 데이터의 캐싱 정의할 수 있음
• default: 기본 캐싱 전략.
• 데이터가 요청될 때마다 캐시된 데이터를 사용하고, 캐시가 없으면 새로 fetch
 
• force-cache: 캐시된 데이터를 항상 사용.
• 즉, 새 요청이 있더라도 캐시에서 데이터를 가져옴 이 경우, 캐시가 만료된 경우에도 새 요청을 보내지 않음
 
• no-cache: 항상 서버에서 새 데이터를 가져옴.
• 캐시된 데이터는 사용하지 않음
 

3. 예시 코드

const addATodoHandler = async () => {
  if (newTodoInput.length < 1) {
    return;
  }
  await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/todos/`, {
    cache: "force-cache", // 캐시된 데이터를 항상 사용
  });
};