Next.js / Request Memoization, 서버 데이터 캐시 정리

 

Request Memoization (요청 단위 메모리)

 

- 같은 요청 흐름 안에서 같은 fetch는 한 번만 실행한다.

- 하나의 HTTP 요청이 서버에 들어왔을때 (동일한 페이지에서 같은 api fetch를 진행할때)

- 그 요청을 1번 하는 동안에만 동일한 데이터 fetch를 진행할때 1번만 fetch 하도록 Next.js가 도와주는 방식이다.

async function getUser() {
    const res = await fetch("https://api.com/user/1");
    return res.json();
}
 
export default async function Page(){
    const user1 = await getUser();
    const user2 = await getUser(); // 또 호출했지만 실제 요청이 나가진 않는다.
}

 

 - Next가 내부적으로 같은 키라면 여러번 api가 호출되는걸 1번만 호출하여 해당 데이터 값을 메모리제이션 공간에

   저장하여, 2번째 호출되는 같은 api는 해당 메모리제이션을 히트해서 해당 값을 가져오는 형식으로 작동한다.

 

- 다만, 같은 페이지 내에서 동일한 요청으로 랜더링 될때만 해당 기능이 작동하고, 해당 랜더링이 종료되고 다시 랜더링이

  시작된다면, 해당 메모리제이션 데이터도 초기화 되기 때문에 다시 랜더링을 실행하게 된다.

 

- 해당 request Memorization은 기본적으로 켜져있다. 

 

 

Data Cache (Next.js 서버 데이터 캐시)

 

- 이 fetch 결과를 서버가 저장해두고 다음 요청에서도 재사용하게 만드는 방법이다.

- 이 방법은 서버가 종료되지 않는한 데이터가 살아있다.

 

옵션

 

1. await fetch("https://api.com/posts" , {cache: 'no-store'}) : 캐시를 사용하지 않는다.(기본 옵션)

2. await fetch("https://api.com/posts" , {cache: 'force-cache'}) : 캐시 사용

3. await fetch("https://api.com/posts" , {next: {revalidate: 60}) : ISR 방식(지정한 초마다 캐시가 초기화 된다.)

4. await fetch("https://api.com/posts" , {next: {tags: ['posts']} : 태그 기반 으로 해당 태그가 호출되었을때 캐시 초기화 된다.

 

[브라우저 요청 1번]

fetch A -> 실제 API 요청 -> 서버 캐시 저장

 

[브라우저 요청 2번]

fetch A -> 서버 캐시 데이터 반환 (API 요청이 되지 않고 저장되어 있는 서버 내 JSON 데이터가 반환된다.)

 

 

언제 어떤 걸 사용해야 할까?

 

항상 최신 데이터 필요 : cache: 'no-store'

 

블로그 글, 상품 목록 : revalidate

 

사용자 개인 데이터 : cache: 'no-store'

 

CMS 데이터 : revalidate

 

대시보드 실시간 데이터 : no-store