ブラウザバックでページでなくjsonが表示されてしまう

起こっていること

ajaxで非同期の検索機能を作り、その都度バックエンドからajaxでjsonを受け取り、jsのhistoryAPIで検索のパラメーターを保存するためにpushStateしていたら、他のページからブラウザバックで戻ってくるとajaxで取得していたjsonしか表示されなくなってしまった。

原因

ajaxでjsonを取得したときに、次のajaxをしなくていいように自動的にキャッシュされるようになっていた。そのためpushStateで履歴に追加したurlとajaxでリクエストを送るurlが同じときにこのような問題が発生してしまうようだ。

解決策

ajaxでキャッシュしないように変更すれば良い。

$.ajax({
    url      : url,
    data     : {},
    dataType : 'json',
    type     : 'GET',
    cache    : false,  // この１行を追加
    success: (data) => {
      ...
    },
    error: (xhr, status, err) => {
      ...
    },
  });

参考

jQuery.ajaxにCacheが残って困ったら設定