@Kation (asyncな 大学生)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

ブラウザをどこまで信頼する? 開発者の責任範囲

ブラウザの自動処理と開発者の実装の境界線について (特に非同期通信の中断)

はじめに

現在、ネットワークの仕組み(TCP/IP)からWebブラウザの動作までを学習しています。
TCPがデータを確実に届けるための詳細な仕組みや、ブラウザがHTMLを少しずつ受け取りながら画面表示を行う「プログレッシブレンダリング」など、普段意識しない裏側の動作を知り、大変面白く感じています。

その中で、ブラウザが自動で行う処理と、開発者がJavaScriptで明示的に実装すべき処理の境界線について、特に非同期通信のキャンセルに関して疑問が湧いてきました。

質問:通信の中断処理はどこまでブラウザを信頼して良いのか?

例えば、以下のようにサーバーからデータを取得する単純なfetchリクエストがあったとします。

// ユーザー情報を取得する関数
function fetchUserData(userId) {
  console.log('ユーザーデータの取得を開始します...');
  
  fetch(`https://api.example.com/users/${userId}`)
    .then(response => {
      if (!response.ok) {
        throw new Error('ネットワーク応答が正しくありません');
      }
      return response.json();
    })
    .then(data => {
      console.log('取得成功:', data);
      // ここで取得したデータを使って画面を更新する処理
    })
    .catch(error => {
      console.error('データ取得に失敗しました:', error);
    });
}

// ボタンクリックなどで関数を実行
fetchUserData('123');

学習した内容によると、ブラウザはページを離れる際にTCPコネクションなどを自動的にクリーンアップしてくれるとのことでした。一方で、SPA(シングルページアプリケーション)のような環境では、不要になったリクエストをAbortControllerを使って明示的にキャンセルする必要があることも学びました。

ここでお聞きしたいのは、この「ブラウザの自動処理」と「開発者の手動処理」の具体的な切り分けです。

  1. 上記のコードで、fetchが完了する前にユーザーが別のページに遷移したり、ブラウザのタブを閉じたりした場合、このfetchリクエストはブラウザが100%自動で中断してくれると考えて良いのでしょうか?

  2. AbortControllerを使った中断処理を実装すべき具体的なシナリオは、主に「SPAでページ内遷移(コンポーネントの切り替えなど)が発生したとき」という認識で合っていますでしょうか? 他にも「これは絶対に手動でキャンセルすべき」という典型的なケースがあれば教えていただきたいです。

  3. もしブラウザの自動中断に任せた場合、サーバー側では処理が続行されてしまう可能性があるのでしょうか? 明示的にキャンセル(abort)を伝えることのサーバー側へのメリットについても知りたいです。

ブラウザという高性能なプラットフォームを信頼しつつも、開発者としてどこまで責任を持ってコードを書くべきなのか、その境界線についての考え方やベストプラクティスを教えていただけますと幸いです。

よろしくお願いいたします。

0 likes

1Answer

上記のコードで、fetchが完了する前にユーザーが別のページに遷移したり、ブラウザのタブを閉じたりした場合、このfetchリクエストはブラウザが100%自動で中断してくれると考えて良いのでしょうか?

ブラウザがfetchを中断するかどうかはブラウザ次第のようです。
https://www.mizdra.net/entry/2023/12/15/012937
「開発者の責任範囲」という意味では、「対応ブラウザの明示と対応ブラウザでの動作保証」こそが開発者が責任を持つべきことです。

AbortControllerを使った中断処理を実装すべき具体的なシナリオは、主に「SPAでページ内遷移(コンポーネントの切り替えなど)が発生したとき」という認識で合っていますでしょうか? 他にも「これは絶対に手動でキャンセルすべき」という典型的なケースがあれば教えていただきたいです。

fetchを中断する一般的なタイミングといえば、下記の2通りじゃないでしょうか?

  • ユーザが中断操作をした場合(中止ボタンを押すなど)
  • あらかじめ指定したタイムアウト時間をオーバーした場合

SPAでページ内遷移を行った場合にfetchを中断するべきかどうかはそのアプリケーションや取得するデータの仕様によります。
例えば、「選択されたサムネイルに対応する画像をfetchで取得」という状況であれば、ページ内遷移したときに、その画像の取得を中断する意味はあると思います。
しかし、「アプリ全体で利用する自分自身のアカウント情報をfetchで取得」という状況であれば、ページ内遷移をしたとしても中断する意味はないでしょう。

もしブラウザの自動中断に任せた場合、サーバー側では処理が続行されてしまう可能性があるのでしょうか? 明示的にキャンセル(abort)を伝えることのサーバー側へのメリットについても知りたいです。

そもそもabortではサーバ側の処理は止まりません。
fetchの中断はクライアントであるブラウザ側で完結していて、サーバ側ではabortされたかどうかを直接検知することはできません。サーバ側からすると「レスポンスを返し終わる前に接続が閉じられた」という状況になるだけです。

1Like

Your answer might help someone💌