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

> Clean Markdown view of GeekNews topic #6060. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=6060](https://news.hada.io/topic?id=6060)
- GeekNews Markdown: [https://news.hada.io/topic/6060.md](https://news.hada.io/topic/6060.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2022-02-28T11:06:19+09:00
- Updated: 2022-02-28T11:06:19+09:00
- Original source: [css-tricks.com](https://css-tricks.com/send-an-http-request-on-page-exit/)
- Points: 47
- Comments: 0

## Topic Body

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

## Comments



_No public comments on this page._