[Next.js] 캐싱 기능에 대해 알아보기

캐싱 기능이란?

데이터나 결과를 미리 저장해두고, 동일한 요청이나 계산이 다시 필요할 때 저장된 데이터를 사용하여 성능을 향상시키는 메커니즘

 

캐싱의 장점

• 빠른 응답 속도: 저장된 데이터를 사용하여 요청에 빠르게 응답할 수 있어 사용자 경험을 향상
• 서버 부하 감소: 반복적인 계산이나 데이터베이스 접근을 줄여 서버 부하를 줄임.
• 데이터 정합성: 캐시된 데이터를 통해 정확한 정보를 제공할 수 있어 데이터 정합성을 유지
• 대역폭 절약: 반복적인 데이터 요청을 최소화하여 네트워크 대역폭을 절약
• 검색 엔진 최적화 (SEO): 페이지 로딩 속도와 사용자 경험 개선으로 검색 엔진 노출에 긍정적인 영향

 

GET요청결과 캐싱

// cache 옵션을 사용하여 캐싱 여부를 설정
let result = await fetch('/api/data', { cache: 'force-cache' });

// 데이터의 재유효화 간격을 설정
// 60초 동안 데이터 보관
let result = await fetch('/api/data', { next: { revalidate: 60 } });

// 캐싱을 비활성화
let result = await fetch('/api/data', { cache: 'no-store' });

 

페이지단위 캐싱

// revalidate 변수에 원하는 시간(초)를 넣으면 그 시간만큼 캐싱해 둘 수 있슴
// 지정된 시간만큼은 새로고침을 해도 같은 데이터를 보여줌

export const revalidate = 60;