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

• 가끔 사용자가 다른 페이지로 이동하거나, 폼 전송할 때 로그를 남기고 싶은 경우가 있음
• 클릭 이벤트에 fetch를 넣는 것은 꼭 전송된다는 보장이 없음
• 그래서 Fetch하고 나서 window.location 에 넣어서 이동해보지만 이것도 마찬가지로 보장 안됨
  • XHR은 비동기 & 넌블록킹 이기 때문
• fetch를 Promise로 await 처리하면 되긴 하지만 단점이 있음
  • 처리하는 속도가 느려져서 사용자 경험이 안좋아짐
  • 예상처럼 안정적이지 않음. 브라우저 탭을 닫거나 하는 것은 처리 불가능
• 브라우저에게 HTTP 요청을 보존시키는 옵션이 여러가지 있음
  • Fetch 에 keepalive 플래그를 사용하면 페이지가 중단되더라도 해당 요청은 유지
  • Navigator.sendBeacon() 같은 더 간단한 함수
  • 브라우저들은 a 태그에 ping 속성도 지원 (링크에만 사용가능하다는 게 단점, FF는 기본으로 미지원)
• 그럼 뭘 써야 할까 ?
  • 가능하면 fetch() + keepalive
    • 80%의 브라우저가 지원
    • 커스텀 헤더 전송 가능
    • GET 요청으로도 가능
    • 예전 브라우저들 지원
  • sendBeacon() 이 좋은 경우는
    • 96%의 브라우저가 지원
    • 많은 커스터마이징이 필요 없을 때
    • 깔끔하고 우아한 API를 선호할 때
    • 브라우저의 다른 우선순위 요청들과 다투고 싶지 않을 때