単一ページアプリケーション

12月 16, 2020 admin 0 Comments

SPAは、ブラウザがもともと設計されていたステートレスページ再描画モデルから離れた進化であるため、いくつかの新しい （複雑さ、包括性、および著者制御の）可能な解決策は、次のとおりです。

  • クライアント側のJavaScriptライブラリ。
  • SPAモデルに特化したサーバー側webフレームワーク。
  • SPAモデル用に設計されたブラウザとHTML5仕様の進化。,

検索エンジン最適化編集

人気のあるWeb検索エンジンのクローラーでJavaScriptが実行されていないため、SEO（検索エンジン最適化）は、SPAモデルを採用しようとしている公共のウェブサイトにとって歴史的に問題を提起してきました。

2009年から2015年の間、Google Webmaster Centralは、ステートフルAJAXページのフラグメント識別子（#!）の頭文字感嘆符を使用した”AJAXクロールスキーム”を提案し、推奨しました。, 特別な動作が実装しなければならないこのスパサイトの抽出に関連するメタデータ、検索エンジン”sクローラー. このURLハッシュスキームをサポートしていない検索エンジンでは、SPAのハッシュされたUrlは非表示のままです。 これらの”ハッシュバン”Uriは、W3CのJeni Tennisonを含む多くの作家によって、ブラウザでJavaScriptを有効にしていない人にはページにアクセスできなくなるため、問題 また、ブラウザはRefererヘッダー内のフラグメント識別子を送信できないため、HTTP refererヘッダーを壊します。, 2015年、GoogleはハッシュバングAJAXクロールの提案を廃止した。

または、アプリケーションを描画する最初のページサーバーに負荷をかけるとその後のページを更新します。 これは伝統的に難しいので、レンダリングコードが書き込みが必要と異なる言語またはフレームワークのサーバーにクライアント ロジックレステンプレートの使用、ある言語から別の言語へのクロスコンパイル、またはサーバーとクライアントで同じ言語を使用すると、共有できるコードの量を増やすことができます。,

2018年、Googleはクローラーにインデックス作成のためにJavaScriptでない重いバージョンのページを提供したいサイトの別のオプションとして動的レンダリングを導入しました。 レンダリングスイッチとバージョンのページが描画されるクライアント側と描画されるバージョンを特定のユーザます。 このアプローチをwebサーバー検出クローラー（ユーザエージェント)のルーティングしてレンダリングし、それをお召し上がりいただ簡易版のHTMLです。,

SpaではSEOの互換性は簡単ではないため、検索エンジンのインデックス作成が要件であるか、または望ましいコンテキストではSpaは一般的に使用されないことに注意する価値があります。 ユースケースには、認証システムの背後に隠されたプライベートデータを これらのアプリケーションがコンシューマー製品である場合、多くの場合、アプリケーションのランディングページとマーケティングサイトには古典的な”ページ再描画”モデルが使用されます。, Blogs、サポートフォーラム、および他の従来のページの再描画の人工物は頻繁に関連した言葉の調査エンジンを種できる鉱泉のまわりで坐る。

JavaベースのItsNatのようなサーバー中心のwebフレームワークで使用される別のアプローチは、同じ言語とテンプレート技術を使用してサーバー上のハイパーテキストをレ このアプローチでは、サーバーはクライアント上のDOM状態を正確に認識し、必要な大小のページ更新がサーバーで生成され、Ajaxによって転送され、クライアントページをDOMメソッドを実行する新しい状態にするための正確なJavaScriptコードが生成されます。, 開発者は、SEOのためにwebスパイダーによってクロール可能にする必要があるページの状態を決定し、JavaScriptの代わりにプレーンなHTMLを生成するロード時に必要な状態 ItsNatフレームワークの場合、ItsNatはクライアントDOMツリーをJava W3C DOMツリーとしてサーバーに保持するため、これは自動的です。, 開発者は同じJavaコードと純粋なHTMLベースのテンプレートでサーバー内の所望のDOM状態を構築することができるので、この二重性はSEOにとって非常に重要です。

バージョン1以降。,3、ItsNatは新しいステートレスモードを提供し、ステートレスモードクライアントでは、現在のDOM状態をサーバーに知らせるクライアントから送信された必要なデータに基づいてAjaxリクエストを処理するときにDOM状態が部分的または完全にサーバー上で再構築されるため、クライアントDOMはサーバー上に保持されません。, もう一つの可能な選択肢は、PreRender、Puppeteer、Rendertronのようなフレームワークであり、webサーバー構成を備えたミドルウェアとして任意のウェブサイトに簡単に統合でき、ボットリクエスト（google botなど）をミドルウェアによって提供することができる。 これらの枠組みでのキャッシュに関連するwebサイトのページを定期的に許可する最新バージョンに検索エンジンです。 これらのフレームワークはgoogleによって正式に承認さ

ウェブサイトがクロール可能であるかのように見えるようにするための回避策がいくつかあります。, どちらも、SPAのコンテンツを反映する個別のHTMLページの作成を含みます。 また、PhantomJSなどのヘッドレスブラウザを使用してJavaScriptアプリケーションを実行し、結果のHTMLを出力することもできます。

これらの両方はかなりの努力を必要とし、大規模な複雑なサイトのためのメンテナンスの頭痛を与えてしまう可能性があります。 潜在的なSEOの落とし穴もあります。 サーバーで生成されたHTMLがSPAコンテンツとあまりにも異なるとみなされる場合、サイトはペナルティを受けます。, PhantomJSを実行してHTMLを出力すると、ページの応答速度が遅くなり、検索エンジン、特にGoogleがランキングをダウングレードすることがあります。

クライアント/サーバーコードpartitioningEdit

サーバーとクライアント間で共有できるコードの量を増やす一つの方法は、MustacheやHandlebarsのようなロジックレステンプレート言語 などのテンプレート描画できるから別のホスト言語など、RubyのサーバーとJavaScriptのクライアント, しかし、単に共有テンプレートは通常、必要と複製のビジネスロジックを使用を選択テンプレートを生成します。 テンプレートからのレンダリングは、大きなテンプレート内のテキスト入力の値など、ページの小さな部分のみを更新すると、パフォーマンスに悪影響を及 テンプレート全体を置き換えると、ユーザーの選択やカーソル位置が乱れる可能性があり、変更された値のみを更新することはできま, これらの問題を回避するために、アプリケーションは、テンプレート全体を再レンダリングするのではなく、UIデータバインディングまたはきめ細かいDOM

Browser historyEdit

SPAは、定義により”単一ページ”であるため、モデルは”進む”または”戻る”ボタンを使用してページ履歴ナビゲーションのブラウザのデザインを壊します。, これは、ユーザーが戻るボタンを押すと、SPA内の前の画面状態が期待されるが、代わりに、アプリケーションの単一ページがアンロードされ、ブラウザの履歴の前のページが表示されるというユーザビリティの障害をもたらす。

Spaの従来のソリューションは、現在の画面状態に合わせてブラウザのURLのハッシュフラグメント識別子を変更することでした。 これはJavaScriptで実現でき、URL履歴イベントがブラウザ内に構築されます。, SPAがURLハッシュ内に含まれる情報から同じ画面状態を復活させることができる限り、予想される戻るボタンの動作は保持されます。

この問題にさらに対処するために、HTML5仕様ではpushStateとreplaceStateが導入され、実際のURLとブラウザの履歴にプログラムでアクセスできます。

AnalyticsEdit

Googleアナリティクスなどの分析ツールは、新しいページの読み込みによって開始されるブラウザでの新しいページの読み込み全体に大きく依存します。 Spaはこの方法では動作しません。,

最初のページの読み込み後、後続のすべてのページおよびコンテンツの変更は、アプリケーションによって内部的に処理されます。 この関数を呼び出すことに失敗すると、ブラウザは新しいページの読み込みをトリガーすることはなく、ブラウザの履歴に何も追加されず、分析パッケージ

SPAEditへのページ読み込みの追加

HTML5history APIを使用してSPAにページ読み込みイベントを追加することができます。, 難しさは、これを管理し、すべてが正確に追跡されていることを確実にすることです。の枠組みを提供オープンソースデインテグレーションへの対応の分析を提供します。 開発者はそれらをアプリケーションに統合し、すべてが正しく動作していることを確認できますが、すべてを最初から行う必要はありません。

初期ロードの速度編集

単一ページアプリケーションの最初のページロードは、サーバーベースのアプリケーションよりも遅いです。, これは、最初の負荷を下げることの枠組みを変更し、どのようなアプリケーションコード前にレンダリングに必要なビューとしてHTMLをブラウザです。 サーバーによるアプリケーションだけは、押し出す必要なHTMLをブラウザの削減の遅延およびダウンロードす。

ページloadEditの高速化

SPAの初期ロードを高速化する方法として、キャッシュへの重いアプローチや、必要に応じてモジュールを遅延読み込む方法などがあります。, しかし、フレームワーク、少なくともアプリケーションコードの一部をダウンロードする必要があり、ブラウザに何かを表示する前にデータのAPIにヒットする可能性 これは”今私を支払うか、または後で私を支払う”トレードオフのシナリオである。 パフォーマンスと待ち時間の問題は、開発者が行わなければならない決定のままです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です