1. 메모이제이션 (Memoization)
동일한 연산을 반복할 때, 이전에 계산한 결과를 메모리에 저장해 두었다가 동일한 요청이 들어오면 연산을 생략하고 저장된 값을 즉시 반환하는 최적화 기법이다. 불필요한 중복 연산을 제거하는 것이 프론트엔드/백엔드 최적화의 기본 원칙이며, React와 Next.js의 렌더링 철학 전반에 깔려 있는 개념이다.
내부 동작은 세 단계로 나뉜다. 요청이 들어오면 캐시에 해당 데이터가 있는지 먼저 확인한다(Cache Hit). 있으면 연산 없이 즉시 반환한다. 없으면(Cache Miss) 실제 연산 또는 DB 조회를 수행하고, 그 결과를 다음 요청을 위해 메모리에 저장한다.
🚨 한계 — Next.js의 요청 메모이제이션은 단일 렌더링 사이클 내에서만 유효하다. 렌더링이 완료되는 순간 캐시는 폐기되며, 이후 새 요청이 들어오면 동일한 연산을 처음부터 반복해야 한다. 이 한계를 보완하기 위해 더 넓은 범위의 캐싱 전략이 필요하다.
2. HTTP 캐시와 CDN
메모이제이션이 단일 렌더링 사이클 안의 단기 캐싱이라면, HTTP 캐시와 CDN은 서버 외부에 존재하는 장기 캐싱 계층이다. 트래픽이 집중될 때 원본 서버의 부하를 줄이고, 물리적으로 가까운 서버에서 응답을 반환해 전 세계 사용자에게 빠른 응답 속도를 제공하는 핵심 인프라다.
- 프록시(Proxy): 클라이언트와 서버 사이를 중계하는 중간 서버. 이미 캐시된 응답은 원본 서버까지 요청이 전달되지 않고 프록시 단에서 바로 반환된다.
- CDN(Content Delivery Network): 프록시 서버를 전 세계에 분산 배치한 네트워크 인프라. 사용자와 물리적으로 가까운 CDN 서버에서 데이터를 반환하므로 응답 지연이 줄어든다.
서버는 Cache-Control 헤더를 통해 클라이언트와 CDN에 데이터의 유효 기간과 갱신 방식을 명시한다. 대표적인 지시어는 다음과 같다.
s-maxage: CDN 등 공유 캐시 서버에서 데이터를 보관할 최대 시간이다.stale-while-revalidate: 유효 기간이 지난 후에도 지정한 시간 동안은 만료된 데이터를 먼저 반환하고, 백그라운드에서 캐시를 갱신한다. 사용자가 로딩을 체감하지 않도록 하는 핵심 옵션이다.
시간대별 동작 흐름은 다음과 같다. (예: s-maxage=60, stale-while-revalidate=30 기준)
- [T = 0초] 최초 요청: CDN에 데이터가 없으므로 원본 서버가 직접 처리한다. CDN은 응답을 받아 60초간 보관한다.
- [T = 30초] 재요청: 유효 기간(60초) 이내이므로 CDN이 보관 중인 데이터를 즉시 반환한다. 원본 서버에는 요청이 전달되지 않는다.
- [T = 70초] 만료 직후 요청: 유효 기간은 지났지만 유예 기간(30초) 이내다. CDN은 만료된 데이터를 먼저 반환해 응답 지연 없이 화면을 렌더링한다. 동시에 백그라운드에서 원본 서버에 새 데이터를 요청해 캐시를 갱신한다.
- [T = 100초] 유예 기간 종료 후 요청: 유효 기간과 유예 기간이 모두 만료됐다. 캐시가 완전히 폐기되며 T = 0초 상태로 돌아가 원본 서버에서 새로 처리한다.
