웹 캐시, 뭐하는 녀석인가

캐시의 종류와 위치

• 로컬 캐시 (브라우저 캐시): 사용자의 웹 브라우저에 직접 저장되는 캐시이다. 오직 한 명의 사용자만을 위한 것으로, 뒤로 가기나 재방문 시 매우 빠른 속도를 경험하게 해준다.

• 공유 캐시 (프록시 캐시): 여러 사용자가 공유할 수 있는 캐시이다. 대표적으로 CDN(Content Delivery Network)이 여기에 해당한다. 사용자와 서버 사이의 중간 지점에서 자주 요청되는 리소스를 캐싱하여 여러 사용자에게 빠르게 응답을 전달한다.

캐시 제어를 위한 HTTP 헤더

• Cache-Control: max-age=<seconds>: 리소스가 유효하다고 간주되는 시간을 초 단위로 지정한다. 예를 들어 max-age=60이라면, 60초 동안은 서버에 재요청 없이 캐시된 데이터를 사용한다.

• Cache-Control: no-store: 가장 강력한 설정으로, 어떤 경우에도 캐시를 저장하지 말라는 의미이다.

• Cache-Control: no-cache: 이름 때문에 헷갈릴 수 있지만 캐시를 저장하지 않는다는 의미가 아니다. 캐시는 저장하지만, 사용할 때마다 서버에 이 캐시가 유효한지 **재검증(Revalidation)**하라는 의미이다.

• Cache-Control: s-maxage=<seconds>: max-age와 유사하지만, CDN과 같은 공유 캐시에만 적용되는 유효 시간이다.

• stale-while-revalidate=<seconds>: max-age로 지정된 유효 시간이 지나더라도, 지정된 시간 동안은 일단 오래된(stale) 캐시 데이터를 보여주면서 백그라운드에서 새로운 데이터로 재검증하라는 의미이다.

캐시 재검증

Next.js에서 캐시 사용하기 (App Router)

Request Memoization

Data Cache

// 1시간(3600초)마다 캐시를 갱신한다.
fetch('https://...', { next: { revalidate: 3600 } });

Full Route Cache

(Pages Router)

1. 인메모리 캐시 구현

class MemoryCache {
    constructor() {
            this.cache = new Map();
    }
                
    set(key, value, ttl = 60000) {
     // 기본 1분 TTL
             const expireTime = Date.now() + ttl;
             this.cache.set(key, {value, expireTime });
    }
    
    get(key) {
            const item = this.cache.get(key);
            if (!item) return null;
            // 만료 시간을 체크하여 만료되었다면 삭제하고 null을 반환한다.
            if (Date.now() > item.expireTime) {
                            this.cache.delete(key);
                            return null;
            }
            return item.value;
            }
    }
    
// 여러 요청에서 공유될 수 있도록 글로벌 인스턴스로 관리한다.
const cache = new MemoryCache();
export default cache;

2. API Route에 캐싱 로직 적용

1. 요청이 들어오면 방송사(stn), 채널(ch) 등의 매개변수로 고유한 cacheKey를 생성한다.

2. cache.get(cacheKey)를 호출하여 유효한 캐시 데이터가 있는지 확인한다.

3. 캐시 히트(Cache Hit): 데이터가 있다면 외부 API 요청 없이 즉시 캐시된 데이터를 반환한다.

4. 캐시 미스(Cache Miss): 데이터가 없다면 외부 방송사 API에 데이터를 요청한다.

5. 가져온 데이터를 가공한 후, cache.set(cacheKey, responseData, 30000)를 통해 30초의 TTL을 설정하여 캐시에 저장한다.

6. 새로운 데이터를 클라이언트에 반환한다.

import cache from '../../../lib/cache.js';

export default async function handler(req, res) {
    const { stn, ch, city } = req.query;
    
    // 1. CDN 및 브라우저 캐시를 위한 헤더 설정
    // s-maxage: CDN에서 30초간 캐시
    // stale-while-revalidate: 만료 후 60초간은 일단 오래된 캐시를 보여주면서 백그라운드에서 갱신
    res.setHeader('Cache-Control', 's-maxage=30, stale-while-revalidate=60');
    
    const cacheKey = `program_${stn}_${ch}_${city || 'default'}`;
    
    // 2. 인메모리 캐시 확인
    const cachedResult = cache.get(cacheKey);
    if (cachedResult) {
        return res.status(200).json(cachedResult); // 캐시 히트
    }

    // 3. 캐시 미스 시 외부 API에서 데이터 가져오기 (try-catch 블록 내부)
    try {
        // ... (외부 API 호출 및 데이터 처리 로직) ...
        const responseData = { title: title };

        // 4. 인메모리 캐시에 결과 저장 (30초 TTL)
        cache.set(cacheKey, responseData, 30000);
        res.status(200).json(responseData);

    } catch (error) {
        // ... (에러 처리) ...
    }
}

결과