Next.js - #cache

dynamic rendering으로 동작하는 페이지가 많으면
사용자가 그 페이지를 방문할 때마다 계속 다시 페이지를 그려야하기 때문에 서버 부담이 심해질 수도 있다
이럴 경우, 캐싱기능을 이용하면 된다

cache

캐싱이란 데이터를 잠깐 저장해두고 재사용하는 것이다
페이지를 캐싱한다는 것은 페이지 완성본을 잠깐 저장해두고 필요할 때마다 재사용하는 것이다
페이지 뿐만 아닌 GET 요청 결과도 캐싱할 수 있다

server component 안에서만 캐싱 기능을 사용할 수 있고
Next.js에서는 페이지 캐싱, GET 요청 결과 캐싱과 같은 것들이 쉽게 가능하다

fetch() 캐싱

export default async function 페이지(){
  const result = await fetch('/URL')
  /* ↑ 같은 거 ↓ */
  const result = await fetch('/URL', { cache: 'force-cache' })
  ...
}

캐싱이 되면 같은 /URL로 요청할 때 마다
다시 npm run build 하기 전 까진 계속 캐싱된 결과를 가져오게 된다
그럼 서버API 또는 DB 응답을 기다릴 필요가 없기 때문에 훨씬 빠르게 데이터를 가져올 수 있다

아래 옵션들은 Next.js에서 기존 자바스크립트의 fetch()를 업그레이드해놔서 사용이 가능한 옵션들이다

cache

• fetch('/URL', { 옵션: value })
  • force-cache : 캐싱 활성화 (기본값)
  • no-store : 캐싱 비활성화, 매번 서버로 요청하여 새로운 데이터를 가져옴
    (실시간 데이터가 중요할 경우 사용)

revalidate

• fetch('/URL', { next: { revalidate: value } })
  • 캐싱 결과를 설정한 값만큼만 보관
  • 설정된 시간이 지나면 /URL로 새로 요청 후 결과를 가져와 다시 캐싱
  • 페이지 단위 캐싱에서 주로 사용된다

페이지 단위 캐싱

export default async function List() {
  const db = (await connectDB).db('forum');
  const list = await db.collection('post').find().toArray();
  ...
}

이렇게 DB에서 직접 데이터를 가져오는 경우의 캐싱은 어떻게 할까
해당 기능이 있는 API를 만들어 fetch()로 바꾸거나
revalidate 옵션을 사용해 페이지 단위로 캐싱이 가능하다
캐싱하려는 page.js 파일 위쪽에 revalidate 변수와 원하는 초단위 값을 적으면
해당 페이지를 원하는 시간 만큼 캐싱할 수 있다

export const revalidate = 60;

export default async function List() {
  const db = (await connectDB).db('forum');
  const list = await db.collection('post').find().toArray();
  ...
}

위와 같이 코드를 작성하면 60초 동안은 새로고침해도 미리 캐싱된 페이지를 보여주며
60초가 지나면 페이지를 재생성해서 다시 캐싱한다
(설정된 값이 지나면 무조건 자동 재생성은 아니고 방문자가 있어야 페이지를 재생성한다)