[HTTP] Cache Control

캐시는 자주 사용되는 데이터나 값을 임시로 저장해 두는 공간으로, 이를 통해 데이터 접근 속도를 향상시키는 역할을 합니다.

웹캐시는 웹 페이지나 기타 웹 리소스를 임시로 저장해 두는 공간으로, 이를 통해 웹 페이지 로딩 속도를 향상시키고 서버 부하를 줄이는 역할을 합니다.

캐시 설정 방법

1. 서버에서 캐시 설정
2. CDN(중간 서버)에서 캐시 설정
3. 프론트에서 캐시 설정

---

 

1. 서버에서 캐시 설정

1-1. HTTP Response Header의 Cache-Control 속성

속성설명

no-store	데이터를 캐싱하지 않음
no-cache	데이터를 캐싱하긴 하지만, 매 요청마다 서버 측에서 유효성 검사를 해야 함
max-age={seconds}	{seconds} 동안은 캐싱된 데이터를 사용하며, {seconds}가 지나면 서버 측에서 유효성 검사를 해야 함
s-maxage={seconds}	프록시 서버 등 중간 서버에서만 적용되는 속성으로, {seconds} 동안은 캐싱된 데이터를 사용하며 {seconds}가 지나면 서버 측에서 유효성 검사를 해야 함
public	브라우저, 프록시 서버 등 어디에서든 데이터를 캐싱 가능
private	브라우저에서만 데이터를 캐싱 가능

예시 코드 (Node.js / Express)

const express = require('express');

const app = express();

app.get('/my-route', (req, res) => {
  res.set('Cache-Control', 'public, max-age=60');
  res.send('Hello World!');
});

 

1-2. 유효성 검사 (조건부 요청)

캐시가 만료되었거나 no-cache인 경우, 브라우저는 아래 헤더를 담아 서버에 요청하고 서버는 리소스가 바뀌지 않았다면 본문 없이 304 Not Modified를 응답합니다.

1. If-None-Match: 캐시된 리소스의 ETag 값과 현재 서버 리소스의 ETag 값이 같은지 확인합니다.
2. If-Modified-Since: 캐시된 리소스의 Last-Modified 값 이후에 서버 리소스가 수정되었는지 확인합니다.

---

 

2. CDN을 중간 서버로 사용하는 경우

CDN은 사용자와 원본 서버 사이에서 리소스를 캐싱하는 중간 서버 역할을 합니다.

• 위에서 설명한 s-maxage, public/private 같은 속성들을 CDN 서버에서도 설정할 수 있다.
• CDN에서는 s-maxage가 max-age보다 우선 적용되므로, 브라우저와 CDN의 캐시 시간을 따로 가져갈 수 있다.

---

 

3. 프론트에서 캐시 설정

3-1. 서버의 데이터를 캐싱하는 방법 – React Query

• staleTime: staleTime 동안 캐싱된 데이터를 fresh 상태로 보고 그대로 사용함
• cacheTime (v5부터 gcTime): 쿼리가 inactive된 시점부터 cacheTime까지 데이터를 캐싱함

3-2. Next.js API Routes

• HTTP Response Header의 Cache-Control 속성을 통해 설정

export default function handler(req, res) {
  res.setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=30');
  res.status(200).json({ message: 'Hello' });
}

3-3. Cache-Control Meta Tag

<head>
  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
</head>

 

ref.
https://app.notion.com/p/jiyeon-123/Cache-Control-5dd763d9706b47d69b7babf2160d3e25?source=copy_link#814137e1321049bb91e1c58fb7c5cbdb

https://app.notion.com/p/jiyeon-123/Cache-Control-5dd763d9706b47d69b7babf2160d3e25?source=copy_link#11c9a958b8b64a56b0676ffae1a4b2c2

https://app.notion.com/p/jiyeon-123/Cache-Control-5dd763d9706b47d69b7babf2160d3e25?source=copy_link#bb129fa6c2e24a64b31d4578e65590ba


https://app.notion.com/p/jiyeon-123/Cache-Control-5dd763d9706b47d69b7babf2160d3e25?source=copy_link#68cddf8dce85467ba077e2fd9b70bb84