私のウェブサイトのパフォーマンス/応答性を改善するために、AJAX、replaceState、pushState、および popstate リスナーを使用して部分的なページ読み込みを実装しました。
基本的に、ページの中央部分 (HTML) を状態オブジェクトとして履歴に保存します。リンクがクリックされると、サーバーにページの中央部分のみを要求し (これらの要求を別の Accept ヘッダーで識別します)、それを JavaScript に置き換えます。popstate で、前の中央部分をつかみ、dom に押し戻します。
これはほとんど問題なく動作しますが、私が立ち往生している特定の問題を発見しました。説明するのが少し複雑なので、これがあまり明確でない場合は申し訳ありません。
ほとんどのページに検索フォームがあります。ajax による部分的なページの読み込みは GET リクエストでのみ行われ、フォームは POST を実行し、結果としてページ全体が読み込まれます。
次の一連のページをナビゲートすると、中央のコンテンツのみで構成され、周囲の DOM がまったくない不正な部分ページに行き着きます。
ホームページから開始 (ページ全体の読み込みを介して) - 検索を実行します (post-redirect-get)
検索結果に移動します (ページ全体の読み込みを介して) - 次に [ホーム] をクリックします
ホーム ページに戻ります (動的 get を介して) - クリックしますブラウザに戻る
検索結果 (popstate リスナーから) - ブラウザに戻るをクリックします
不正なホームページです。
不正なホームページが表示されると、popstate リスナーがまったく存在しません。
私が考えているのは、ホームページの 2 番目のロード (動的、部分的) がブラウザーによってキャッシュされており、ページ全体が戻ると、ブラウザーは完全なページではなく、キャッシュされた部分的な応答を表示するだけです。 .
これを改善するために、応答に Vary: Accept ヘッダーを追加して、accept ヘッダーに基づいてコンテンツが変更される可能性があることをブラウザーに知らせます。また、部分的に読み込まれたコンテンツに Cache-Control max-age=0、pragma no-cache、および過去の有効期限を追加して、ブラウザーがこれをキャッシュしないように強制しましたが、どれも解決しません。
残念ながら、私の会社は開発サーバーへの外部トラフィックを許可していないため、問題を示すことはできません。ここでさまざまな同様の質問を見てきましたが、まったく同じものはなく、提案された解決策も機能していないようです。
無意味なパラメーター (blah=blah) を動的 GET 要求に追加すると、問題が解決します。しかし、これは私がやりたくない醜いハックです。これはキャッシングの問題だと思うので、ヘッダーで解決できるようです。誰が何が起こっているのか説明できますか?