Data caching
next.js의 데이터 캐시는 api호출을 통해 불러온 데이터를 Next 서버에서 보관하는 기능이다
영구적으로 데이터를 보관하거나, 특정 시간을 주기로 갱신시키는 것도 가능하다
이 기능으로 불필요한 데이터 요청 수를 줄일 수 있다.
fetch()를 사용해서만 가능
const response = await fetch(`/api`, { cache: "force-cache" });
// { cache: "force-cache" }
// 요청된 결과를 무조건 캐싱. 한번 호출된 이후로는 다시 호출이 안됨.
// { cache: "no-store" },
// 데이터 페칭의 결과를 캐싱하지 않도록함
// { next: {revalidate: 10} },
// 특정 시간주기로 캐시를 업데이트함. ISR방식과 유사함. 초단위.
// {next: {tags: ['a'] }}// 데이터 fetch를 하면 next 로그에서 보이도록 설정하는 방법
const nextConfig: NextConfig = {
logging: {
fetches: {
fullUrl: true,
},
},
}
Next.js 14 버전까지는 데이터를 자동으로 캐싱하는걸로 되었지만,15버전 에서는 자동으로 캐싱을 하지 않도록 default로 되어있다.
여기서 revalidate 옵션을 사용할 경우 데이터 fetch의 순서는
접속요청 -> 10초 경과일 경우, stale 상태가 되며 일단 stale상태의 데이터를 그대로 사용하여 html을 반환 -> 그 후 next.js 서버에서 데이터를 다시 백엔드서버에서 최신데이터를 가져온다 -> 다음 접속요청 -> 이때는 10초 안에 요청시 캐시가 HIT해서 최신 데이터를 가져온 것을 반환
tags 옵션은 요청이 들어왔을때 데이터를 최신화한다
즉 이전 page router의 ISR의 on-Demand Revalidate 방식과 동일하다
request memoization
request memoization 이란?
여러 컴포넌트에서 데이터 요청이 일어나는 request a, b, c에서
page.tsx 는 a b c layout.tsx는 b, c 이렇게 일어난다 했을 때, 중복된 api요청을 제거할 수 있도록 하는 것이다.
넥스트 서버측에서 리퀘스트 메모이제이션기능이 발생하여 만약 a 리퀘스트가 한 페이지에서 3개의 요청이 일어나면 최초 요청은 백엔드 서버에서 데이터를 가져오지만, 두번째부터는 리퀘스트 메모이제이션에서 저장된 값을 그대로 사용하게 되는 것이다.
여기서 데이터 캐시와 리퀘스트 메모이제이션은 다르다.
리퀘스트 메모이제이션은 하나의 페이지를 렌더링하는 동안에 중복된 API요청을 캐싱하기 위해 존재하는 것. 렌더링이 종료되면 모든 캐시가 소멸된다.
이러한 차이점으로 단순히 중복된 리퀘스트를 막기 위해 생긴 기능이다.
넥스트 서버에서의 데이터 캐시는 백엔드 서버로부터 불러온 데이터를 거의 영구적으로 보관하기 위해 사용하는 것. 즉, 넥스트 서버가 구동 중 일때까지.
Next.js가 이러한 기능을 제공하는 이유는
중복 요청을 안보내면 되는게 아닌가 싶지만, 이전 page router 방식과는 다른 app router 에서는 서버컴포넌트의 도입으로 인한 컴포넌트별로 api fetch가 각각 컴포넌트별로 일어나기 때문이다. 즉 데이터 fetch의 패턴이 달라진 것이다.
page router 는 페이지단에서 SSR 같은 방식으로 하위 컴포넌트에 props로 뿌려주는 방식이었지만,
app router 에서는 컴포넌트가 각각 자신이 필요한 데이터를 fetch하는 방법으로 바뀌었기 때문이다.
그렇기 때문에, 각각의 컴포넌트에서 중복된 request가 생길 가능성이 있기 때문에 리퀘스트 메모이제이션 기능이 생기게 된 것이다.
