TIL 63. 2024-04-01

팀 프로젝트 진행 중 해당 API 부분의 cache 해석

export async function getToken({ room, name }: MafiaRoom) {
  const response = await fetch(`/livekit/get-participant-token?room=${room}&username=${name}`, {
    cache: "no-cache"
  });

  const { token }: { token: string } = await response.json();

  return token;
}

no-cache, no-store 차이
:no-cache와 no-store는 모두 HTTP 응답 캐싱을 제어하는 Cache-Control 헤더 지침이지만, 작동 방식과 용도에 있어 다음과 같은 차이점이 있습니다.

1. 캐시 저장 여부:

• no-cache:
  • 요청 시 캐시 사용 금지: 브라우저는 기존 캐시된 응답을 사용하지 않고 항상 Origin Server에 새 요청을 보냅니다.
  • 응답 캐싱 허용: Origin Server로부터 받은 응답은 캐시에 저장될 수 있습니다.
• no-store:
  • 캐시 저장 완전 금지: 어떤 경우에도 응답을 캐시에 저장하지 않습니다.
    
    

2. 최신 데이터 갱신:

• no-cache:
  Origin Server에 항상 요청을 보내므로 최신 데이터를 반영하는 응답을 받을 수 있습니다.
  단, 응답이 캐시된 후 Origin Server의 데이터가 변경된 경우에는 최신 데이터가 반영되지 않을 수 있습니다.
• no-store:
  캐시 저장이 금지되므로 항상 최신 데이터를 반영하는 응답을 받을 수 있습니다.
  
  

3. 성능 및 서버 부하:

• no-cache:
  모든 요청에 대해 Origin Server에 연결해야 하기 때문에 성능 저하가 발생할 수 있습니다.
  불필요한 요청 증가는 서버 부하를 증가시킬 수 있습니다.
• no-store:
  캐시 사용이 없으므로 성능 저하와 서버 부하 증가 가능성이 낮습니다.
  
  

4. 사용 시나리오:

• no-cache:
  데이터가 항상 최신 상태여야 하는 경우 (예: 금융 정보, 뉴스 기사)
  캐시된 응답이 오래되었을 가능성이 높은 경우
  사용자 상호 작용 후 페이지를 새로 고침해야 하는 경우
• no-store:
  민감한 정보나 개인 정보가 포함된 응답
  로그인, 결제 등 중요한 작업 후 페이지 새로 고침
  캐시가 오류를 일으킬 가능성이 있는 경우

공식 문서 참조 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
출처: https://inpa.tistory.com/entry/HTTP-🌐-웹-브라우저의-캐시-전략-Cache-Headers-다루기 [Inpa Dev 👨‍💻:티스토리]