[Next.js] 데이터 캐시

SUN·2024년 12월 10일
0

Next.js - app router

목록 보기
8/21

1. 개요

fetch 메서드를 활용해 불러온 데이터를 Next 서버에 보관하는 기능(캐싱)

2. 사용법

fetch메서드의 두번째 인수에 객체 형태로 설정하여 사용가능하다. (axois 등에서는 불가)

const response = await fetch(`~/api`, {옵션});

옵션

1) {cache: "force-cache"}

- 요청 결과는 무조건 캐싱한다. 
- 최초 한번만 호출됨
- 14버전에서 기본값으로 지정

2) {cache: "no-store"}

- 데이터 페칭의 결과를 저장하지 않는 옵션
- 캐싱을 아예 하지 않는다.
- 15버전에서 기본값으로 지정

3) {next: {revalidate : 시간 }}

- 특정 시간을 주기로 캐시를 업데이트
- page router의 ISR 방식과 유사

4) {next: {tags : ['a'] }}

- 요청이 들어왔을 때 데이터를 최신화 (on-demand Revalidate)
profile
안녕하세요!

0개의 댓글