performance API로 페이지 상태 알아내기

이 값이 유용한 이유는 뒤로 가기나 앞으로 가기를 통해 페이지가 변경 되었을때 이 값이 `back_foward인경우는 bfcache를 통해서 페이지가 유지되지 않았음을 쉽게 판별할 수 있기 때문이다.

브라우저에 performance API를 사용하면 현재 페이지의 상태를 알아낼수 있다.

Performance API의 원래 사용 용도는, 실제 사용자 장치 및 네트워크 연결에서 웹어플리케이션의 응답 속도를 측정하기 위한 것이다.

이 API의 navigation 속성을 확인하면 현재 페이지의 상태가 reload로 부터 왔는지, backForward를 통해 왔는지 체크 할수 있다. 구글링을 해보면 원래 사용용도와는 틀리게 활용되는 케이스를 많이 발견할 수 있다.

그리고 우리 서비스의 스크립트에서도 페이지의 상태를 알아내는 용도로 활용되고 있다.

PerformanceNavigationTiming 에 정의되어 있으며, performance.getEntriesByType('navigation') 를 이용하여 접근할 수 있다.

---

back_forward

• performance.getEntriesByType('navigation')[0].type 의 값이 back_forward 인 경우
  • 뒤로가기나 앞으로 가기를 통해서 현재 페이지로 이동한 경우
  • (bfcache가 적용 된 경우에는 뒤로 가기를 통해 들어왔어도 back_forward가 아닌 navigation으로 보인다)

---

reload

• performance.getEntriesByType('navigation')[0].type 의 값이 reload 인 경우
  • 새로 고침을 통해서 현재 페이지로 이동한 경우

---

navigation

• back_forward나 reload 상태가 아닌 초기상태
  • (bfcache가 적용 된 경우에는 뒤로 가기를 통해 들어왔어도 navigation이다)

---

prerender

• rel="prerender"를 이용한 사전 렌더링 되는 경우라고 하는데 mdn에서는 더이상 잘 지원되지 않는 비표준 기능이라고 설명되고 있다.

---

추가 참고 정보

Safari에서 완벽하게 back_forward 감지하는 방법 (chat gpt가 알려줌)

최신 브라우저뿐만 아니라 bfcache까지 포함해서 모든 back_forward 상황을 감지하려면 다음과 같이 performance API와 pageshow 이벤트를 함께 사용하면 된다.

function isBackForwardNavigation(): boolean {
  if (performance.getEntriesByType) {
    const [navigation] = performance.getEntriesByType("navigation") as PerformanceNavigationTiming[];
    return navigation?.type === "back_forward";
  }

  if (performance.navigation) {
    return performance.navigation.type === 2;
  }

  return false;
}

window.addEventListener("pageshow", (event) => {
  if (event.persisted) {
    console.log("🔄 bfcache에서 복원됨! (Safari 포함)");
  } else if (isBackForwardNavigation()) {
    console.log("🔄 뒤로 가기/앞으로 가기 감지됨!");
  } else {
    console.log("✅ 일반적인 페이지 로드");
  }
});