[JavaScript] BF캐시 (Back Forward Cache)

사실 BF캐시 관련한 내용을 JavaScript 카테고리에 넣는 게 맞으려나 하고 망설여지지만 카테고리가 다양하지 못해 일단 여기에 넣어두고자 한다.

---

BFCache

BFCache란 뭘까?

이 녀석의 풀 네임은 Back Forward Cache이다.

즉, 이름 그대로 뒤로/앞으로 가기 버튼을 눌었을 때 화면을 바로 보여주기 위한 브라우저에서 발생하는 최적화 기능이다.

페이지를 이동할 때 페이지 전체의 스냅샷을 저장하는 캐시라고 생각하면 된다.

---

BFCache는 무조건 발생하는 건가?

결론부터 말하자면 '무조건 발생하는 건 아니다'라고 말할 수 있다.

주요 브라우저인 크롬/사파리/파이어폭스 등 BFCache를 제공하지만 특히 크롬 같은 경우에는 BFCache에 최적화된 사이트만 캐싱하려고 노력하는 듯하다.

 

개발자 도구 > Application > Background Services > Back/forward cache 탭에 들어가 보면

[Test back/forward cache] 버튼이 있는데, 눌러보면 현재 페이지가 영향을 받는지 안 받는지 알 수 있다.

그리고 만약 적용되지 않는다면 그 이유까지 설명해주고 있는 것을 아래 두 이미지를 통해 알 수 있다.

---

그러면 BFCache는 꼭 적용되어야 좋은 거 아닌가?

BFCache 자체가 사용자 경험 측면에서 굉장히 좋은 기능인 것은 맞다.

하지만 개발자 입장에서는 글쎄... 꼭 좋다고만 할 수는 없을 거 같다.

만약 항상 최신 데이터를 갱신해야만 하는 페이지가 있다고 한다면 BFCache는 굉장한 방해요소가 될 것이다.

 

하지만 이제 BFCache라는 존재에 대해 알았으니 공생하며 제어만 할 줄 알면 대비가 가능하다.

BFCache 감지

pageshow/pagehide 이벤트를 통해 BFCache를 감지할 수 있다.

감지만 할 수 있다면 최신 데이터를 다시 불러오던가 이것저것 후처리가 가능해진다.

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // 캐싱되면 안되는 작업들 처리
  }
});

window.addEventListener('pagehide', (event) => {
  if (event.persisted) {
    // 캐싱되면 안되는 작업들 처리
  }
});

pageshow/pagehide 이벤트에서 사용한 persisted 속성이 true라면 각 이벤트에 알맞게 의미가 달라진다.

pageshow는 bfcache로부터 복원된 경우 true를 리턴하고

pagehide는 브라우저가 캐시 하려고 시도할 경우 true를 리턴한다.

 

이렇게만 하면 쉽게 해결할 수 있을 거 같은데,

난감한 부분이 위에서 설명했던 것처럼 크롬의 경우에는 매번 진입하는 게 아니라는 점이다.

그리고 pagehide에서의 persisted 역시 결과적으로 캐시 되지 않을 경우 true가 아니라는 점이다.

 

그래서 보통 pageshow 이벤트만 주로 사용하고 아래와 같이 구성한다.

window.addEventListener('pageshow', (event) => {
  if (event.persisted || window.performance.navigation.type === 2) {
    // 캐싱되면 안되는 작업들 혹은 캐싱에서 필요한 것들 채워넣기
  }
});

window.performance.navigation.type === 2를 사용하여 "뒤로 가기"해서 들어올 경우 진입할 수 있도록 구성해서 사용하고는 한다.

 

그리고 주석에 있는 내용처럼 캐싱되면 안 되는 작업, 캐싱에서 누락된 데이터들 등 필요에 따라 후처리를 해주면 된다.

BFCache 최적화

본문에서 모든 페이지가 bfcache에 저장되는 것이 아니라고 하였는데,

페이지를 bfcache에 적합(혹은 부적합)하게 만드는 방법에 대해 간단하게 알아보자.

 

1. unload 이벤트 금지

unload 이벤트는 bfcache보다 앞서고 unload 이벤트가 발생한 후 페이지가 계속 존재하지 않을 것이라는 가정 하에 작동하기 때문이다.

그래서 굳이...굳~이 unload 이벤트를 사용하고 싶고 bfcache도 사용하고 싶다면 차라리 pagehide 이벤트를 사용하는 것을 권장한다.

2. window.opener 참조 피하기

window.opener 참조가 있는 페이지는 안전하게 bfcahe를 넣을 수 없는 환경이다.

보안 위험이 있을 뿐만 아니라 액세스를 시도하는 모든 페이지가 손상될 수 있는 위험이 있기 때문이다.

---

BFCache는 웹뷰를 작업하다가 알게 된 개념인데, 자세히 알아보고자 공부 겸 정리하게 되었다.

만약 좀 더 자세한 내용을 알고 싶다면 아래 참고 블로그를 한 번 살펴보는 것을 추천한다.

---

참고: https://ui.toast.com/posts/ko_20201201

이전/다음 페이지 캐시

참고: https://web.dev/i18n/ko/bfcache/

캐시 뒤로/앞으로

 

드는 제목 그대로 배열인지 확인하기 위한 메서드이다.

배열인지를 확인할 때 instanceof나 typeof 대신에 Array.isArray()를 사용하는 것이 더 정확한 결과를 얻을 수 있다.