これはブラウザ環境全般の仕様 に関わる話みたいです。整理してみます。

1. ブラウザでの非同期リクエストとページ遷移

1. 通常の HTML + JavaScript でも、fetch や XMLHttpRequest で非同期リクエストを送った後に
   ページ遷移（window.location.href = ... など）すると、そのリクエストはブラウザによって中断される ことがあります。

2. これは「ページを破棄したら、そのページから発生したネットワークリソースも不要」とブラウザが判断するためです。

👉 なので「API完了を待たずに画面遷移すると処理が消える」というのは、ブラウザ仕様として普通に起こり得ます。

2. ブラウザごとの違い

1. Chrome, Firefox, Safari, Edge など主要ブラウザは共通して
   「ページをアンロードするときに発生しているリクエストはキャンセルされる」傾向があります。

2. ただし挙動の細かさ（例えばリクエストが直前に送信済みでサーバーに届いたかどうか）はブラウザやタイミング次第。

3. そのため「あるブラウザでは処理が消えたけど、別のブラウザではサーバーに届いていた」という現象も起こり得ます。

3. 解決策（昔からある工夫）

1. 1. 画面遷移を遅らせる

      1. await fetch(...) を完了してから window.location.href = ... する

      2. ただしユーザー体験的に遅延が発生する

   2. Beacon API を使う

      1. navigator.sendBeacon(url, data) はページが閉じても「必ずサーバーにデータを送る」ことを保証してくれる

      2. 主にログ送信やトラッキングに使われる

   3. Service Worker 経由で送信

      1. ページが破棄されても Service Worker がバックグラウンドでリクエストを処理してくれる

      2. ただし仕組みが複雑

4. React と通常HTMLの違い

1. 通常HTMLのページ遷移
   → ページが完全にリロードされるので、未完了のリクエストはキャンセルされる可能性が高い

2. React SPA の画面切り替え（クライアントルーティング）
   → ページ全体はリロードされず、コンポーネントのマウント／アンマウントだけが行われる
   → そのため、リクエスト自体は続行する（ただし UI が消えると setState はできない）

👉 つまり、「リクエスト自体が消える問題」はフルリロード型のページ遷移特有であり、
React SPA の画面切り替えなら「リクエストは残るけど UI 更新はできない」という形になるわけです。

まとめ

1. ブラウザは「ページ破棄時にリクエストを中断する」仕様を持っています。

2. React SPA はページを破棄しないのでリクエストは生き続けるが、UI更新ができなくなるだけです。

3. 重要処理を確実に送信したいなら sendBeacon や Service Worker の活用が有効です。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

Gogo

最新記事 by Gogo (全て見る)

• HTMLでページ遷移すると、そのリクエストはブラウザによって中断されてしまう - 2025年9月28日
• SQL Server実行計画の読み解き方 - 2025年8月31日
• Oracle実行計画の読み解き方① - 2025年8月1日