アプリケーション内を移動するために URL の変更をリッスンする、非常に機能的な単一ページのクライアント側アプリケーションを構築するとします。
次に、ユーザー (または検索エンジン ボット) が URL によってページをロードするとき、通常どおり静的な JavaScript ファイルを配信して API をヒットする代わりに、サーバー側ですべてを事前計算し、DOM を配信したいとします。 js の状態。
このような状態の実行をクライアントに永続化するための既存のツールまたは手法があるかどうか疑問に思っています。
ファントム JS などでスクリプトを実行して DOM 要素を出力できることはわかっていますが、イベント ハンドラー、コントローラー、および js メモリ状態が適切にアタッチされません。ユーザー エージェントをスニッフィングして、事前計算されたコンテンツのみをボットに送信することもできますが、Google がこれを罰するのではないかと心配しています。また、最初に事前計算されたすべてのものを送信したことによる速度の利点も失われます。
サーバー側でコンパイルして、特定の URL でリソースをリクエストした結果をクライアントに送信しますか? あなたのバックエンドは何で書かれていますか?
Java の GAE で動作する API があります。私たちのアプリは単一ページのアプリであり、HTML5 履歴オブジェクトを使用するため、フロントエンドで実際の URL に対する「実際の応答」が必要です。
これを処理するために、ページ内のデータがサーバーからロードされてクライアントに送信されるときに、JSP を使用してページ内のデータを事前にキャッシュします。
フロント エンドでは Backbone を使用するためBackbone.sync、探しているデータのコピーをページ上でローカルに探し、そこにない場合にのみ AJAX 呼び出しとしてサーバーから要求するように変更しました。
そうです、これは ajax が導入される前にすべてのサイトが行っていたこととほとんど同じです。秘訣は、データがページ内 (または localStorage 内) でローカルになるようにアプリを作成し、それだけでなく、データを要求することです。次に、ページがサーバー エンドで「構築」されていることを確認します (そのため、サーバー エンドの HTML 要素に実際にデータを入力するため、ページはクライアント エンドで JS を必要としません)。
別の場所に移動すると、データは動的になり、ページはリロードされません。