사용자가 페이지를 떠날 때 안정적으로 HTTP 요청 보내기

Navigator.sendBeacon() 사용하기

Navigator.sendBeacon() 함수는 페이지가 떠나갈 때 신뢰성 있게 데이터를 전송하기 위해 만들어진 API입니다. 간단히 말해, 작은 데이터 블록을 서버로 보내는 데 적합합니다.

기본 사용법은 다음과 같습니다.

navigator.sendBeacon('/log', JSON.stringify({ some: 'data' }));

하지만 이 API는 커스텀 헤더를 지원하지 않으므로, Content-Type을 application/json으로 지정하고 싶다면 Blob 객체를 사용해야 합니다.

<a href="/some-other-page" id="link">Go to Page</a>
<script>
  document.getElementById('link').addEventListener('click', (e) => {
    const blob = new Blob([JSON.stringify({ some: 'data' })], { type: 'application/json; charset=UTF-8' });
    navigator.sendBeacon('/log', blob);
  });
</script>

이렇게 하면 페이지가 unload 되더라도 요청이 유지되어 전송됩니다. fetch와 비교하면 sendBeacon은 낮은 우선순위로 전송되므로 중요한 작업에 영향을 주지 않습니다.

Beacon 스펙에 따르면, 이 API는 사용자 경험을 해치지 않으면서 백그라운드에서 데이터를 전송할 수 있도록 설계되었습니다.

따라서 분석 로그나 상태 전송과 같이 즉시 응답이 필요 없는 경우에는 sendBeacon을 사용하는 것이 권장됩니다.