뒤로가기에 오래된 상태가 보이는 문제

로그아웃한 뒤 이전 page로 돌아갔는데 사용자 이름과 작성 중 form이 즉시 나타납니다. network panel에 문서 요청이 없다는 이유로 browser 오류라고 판단하기 전에 bfcache 복원인지 확인해야 합니다.

bfcache는 HTTP response만 재사용하는 cache가 아니라 JavaScript heap을 포함한 page snapshot을 보관했다가 복원하므로, 복원 뒤에는 이전 화면 상태와 현재 server 상태가 다를 수 있습니다.

HTTP cache와 다른 복원 방식

bfcache hit에서는 기존 document와 JavaScript 상태가 통째로 재개될 수 있습니다. pageshow는 최초 load와 history 복원에서 모두 발생하고, PageTransitionEvent.persisted로 cache에서 복원됐는지 구분할 수 있습니다. unload handler는 bfcache 사용을 막을 수 있으며, pagehide도 mobile에서 항상 발생한다고 보장되지 않으므로 중요한 저장의 유일한 수단으로 쓰면 안 됩니다.

window.addEventListener('pageshow', async (event) => {
  if (!event.persisted) return;

  const response = await fetch('/api/session', { cache: 'no-store' });
  if (response.status === 401) location.replace('/login');
});

필요한 데이터만 갱신하는 해결 방법

복원될 때 전체 page를 무조건 reload하면 bfcache의 장점을 잃고 form 입력까지 지울 수 있습니다. 인증·잔액·재고처럼 freshness가 중요한 값만 다시 조회하고, 실패했을 때 기존 값을 최신값처럼 표시하지 않습니다. browser DevTools의 back/forward cache 검사와 pageshow log로 hit 여부를 확인한 뒤, 로그인 상태 변경·form 작성 중 이동·여러 tab 시나리오를 각각 검증합니다.

공식 문서

browser별 eligibility와 실제 session freshness 계약을 확인합니다.