(BFCache) 웹브라우저 캐시와 뒤로가기

정은경·2021년 11월 26일

BFCache back forward cache pageShow

👸 Front-End Queen

목록 보기

174/265

문제상황

바닐라로 작성한 웹페이지

index.html 접근
클릭이벤트 실행
다음 페이지 이동
뒤로가기실행

위의 순서로 실행을 하게 되면,
뒤로가기 실행을 하면 "클릭이벤트를 실행하지 않아도!!! 클릭이벤트가 이미 실행되어 있다!!"
왜냐하면 "Back Forward Cache" 때문

Back Forward Cache (BFCache)

페이지에 대한 추가적인 로딩을 하지 않고 자바스크립트 상태까지 유지한다고 함!

The "cache" used by bfcache is different from the HTTP cache (which is also useful in speeding up repeat navigations). The bfcache is a snapshot of the entire page in memory (including the JavaScript heap), whereas the HTTP cache contains only the responses for previously made requests.

해결방법

pageshow/pagehide 이벤트 사용하기
pageshow 이벤트의 경우, 뒤로가기로 재진입한 경우에도 발생하는 이벤트
페이지가 열릴 때마다 수행되어야하는 코드가 있다면, pageshow 이벤트에 바인딩하는 것이 더 바람직
콜백으로 넘겨지는 event 파라미터의 속성 중 persisted가 true인 경우, BFCache로 부터 복원된 상태(뒤로가기 등으로 재진입한 상태임)
바닐라

window.onpageshow = function (event) {
	if (event.persisted) {
    	console.log('BFCache로부터 복원된 것');
    }
  	else {
    	console.log('새로 열린 페이지');
    }
};

jquery

$(window).bind("pageshow", function (event) {
	if (event.originalEvent.persisted) {
    	console.log("BFCahe로 부터 복원 된 것");
    }
    else {
    	console.log("새로 열린 페이지");
    }
});

질문

리액트로 작성한 웹페이지는 위와 같은 상황이 발생하는 가?
* 리액트는 SPA
- url에 따른 이동은 router 라이브러리를 사용해야함
  * 리액트는 브라우저 히스토리를 사용하려면 history 라이브러리를 이용함
- history 라이브러리를 사용할 때 뒤로가기 동작은 어떤가?