SPAについて

5358 ワード
spa テキストリンク
フロントエンド陣営のフレームワーク、ライブラリなどを学ぶと、単一ページのアプリケーションの用語がよく登場します.私が今勉強しているreactを使ったWebアプリケーションもSPAに相当します.

スパって何?


SPAは基本的に1ページで、従来のサーバ側レンダリングに比べて導入が簡単で、ネイティブアプリケーションと同様のユーザー体験を提供するなどの利点があります.出典：PoimaWeb
従来のlinkタグを使用するマルチページアプリケーションでは、新しいページを要求するたびに静的リソースがダウンロードされ、ページ全体を再表示する方法が使用されており、リフレッシュが発生し、使いにくい場合があります.また、ページ全体を更新し、変更する必要のない部分も含めて効率が悪い.
逆に、SPAは、すべての静的リソースに初めてアクセスしたときに一度だけダウンロードされます.その後、新しいページを申請する場合、ページ更新に必要なデータをJSONに送信してページ更新を行うだけで、全体的なトラフィックが減少し、ページ全体を再レンダリングせずに変更した部分だけを更新するので、リフレッシュは発生せず、ネイティブアプリケーションと同様のユーザー体験が提供されます.

なぜスパを使うのですか？


モバイルアプリケーションを使用したことがあるユーザーは知っているはずです.スムーズな切り替えと同時に、Webサイトよりも可用性と反応性が優れていることを体験したことがあるかもしれません.
モバイルアプリケーションがPCを超えた今日、多くのユーザーはモバイルアプリケーションをより熟知し、モバイルアプリケーションの可用性、反応性をより熟知しています.SPAはこのような傾向に対して大衆化し始めた.SPAも、ユーザー体験(UX)の経験を高めるために大衆化された現代ネットワークのモデルだ.
しかし、次のサイトとSPA製このサイトを比較してみましょう.きっと理解できる…!👍
もう一つの例は非常に直感的な画像があり、参考にすることができます.
  • ソース:[仕様]単一ページアプリケーション(SPA)の考察2

    • SPAの欠点


    しかしSPAは長所だけではない.最近大ヒットしたReact珍栄の次はjsまたはVue.js上のNuxt.jsもSPAの欠点を補うために作成されたサーバ側レンダリングをサポートするライブラリです.(厳密にはCSR+SSR)代表的な欠点をいくつか見てみましょう.

    1.検索エンジンの最適化問題


    しかし、SPA生成の結果、<body></body>は空、javascriptはbodyに変更されたため、検索エンジンはこのサイトが空だと判断した.これは,検索エンジンがスクロール時にJavascriptを実行せずにキャプチャを行うための問題である.
    従来のMPAの場合、ユーザー側はサーバから完了した形式のテンプレート(HTMLにデータを挿入)を受信します.したがって、検索ロボットはページをスクロールするのに適しています.
    でも最近グーグルの検索エンジンがJavascriptも扱えるって言ってたけど…?しかし、正常に動作しているかどうかを検証する必要があります.検索エンジンにはグーグルのほかにも多くのものがあります.(代表的なのはN社でしょう)

    2.初期駆動速度


    SPAは、初期接続時にサイト構成に関連するすべてのリソースを一度に取得するため、初期実行速度が比較的遅い.現代のWebアプリケーションはHTMLファイルの他にJavaScriptファイルで実現されているため、ファイル自体も重い.

    3.画面が変わる様子


    SPAは、データを個別に要求して受信し、画面を整理するので、設計によっては画面が変わる場合があります.これは、ユーザー体験に悪影響を及ぼす可能性があります.
    しかし、2番と3番の欠点はlazy-loadingとpre-renderingによってある程度克服することができる.
    まず2番と3番の欠点を克服できるlazy-loadingとpre-renderingを見てみましょうただし、lazy-loadingは、先のフロントエンドのパフォーマンスの最適化号で既に議論されているので、ここでは省略する.
    Lazy-loading(遅延ロード)について簡単に説明します.最初の接続時にすべてのリソースを受信するため、速度が遅くなるため、特定のURLに入ると、すべてのリソースを受信するのではなく、対応するフラグメントが受信されます.(全部じゃない!)
    これは、初期ロードに要する時間をルーティングによって割り当てることを意味する.もちろん、1回ロードした部分はサーバから受信されません.ソース:[仕様]単一ページアプリケーション(SPA)の考察

    スクリーンの変化を克服する方法:プリレンダリング


    ページを移動するときにデータを転送する必要がある場合があります.SPAは、まずデータのない画面を表示し、非同期要求によりサーバからデータを受信し、画面を再編成する.この場合、画面がロードされていることを、つまみなどをロードすることで表示することもできる.
  • のようです.reactを使っている人なら、多くの人が知っているコードで、コードを参考にしているはずです.次のコードは、要素ロード中にロード画面<div>Loading...</div>を表示する.
    •  <Suspense fallback={<div>Loading...</div>}>
     <Component />
 </Suspense>
    しかし最近はpre-renderingと呼ばれ、ロード時にskeleton画面(スケルトンになった画面)を表示することも退屈ではありません.下の写真を参考にすればいいです.(これを試してみたくておしゃれに見えます)
  • ソース:[仕様]単一ページアプリケーション(SPA)の考察2

    • n/a.結論


    みんなが知っているSPAの長所短所、使用理由、短所などを克服するために、この文章を書いて、さらに明確になりました!これらの技術に関する文章を読むのは確かに面白いです:)
    問題は、学習前のレンダリングと次のレンダリングです.jsさえ手を出そうとした.(また時間を割いて他のことを勉強します…)今年立てた計画を仕上げて、急いで次のステップに進みます.jsでSSRを一緒に体験したい.
    また、SEOが欠点を克服する案を理論的に理解しましたが、私のプロジェクトに直接適用して書きたいので、しばらく残しておきます.react-snapライブラリを介して検索エンジン最適化スキームを直接適用します!

    コメントリンク


    Single Page Application & Routing
    JAM Stackコンセプトの整理
    単一ページアプリケーション(SPA)の考察
    [react]検索エンジン最適化(SEO):プレプレゼンテーション(react-snap)
    [プログラマー/レベル2]プリンタ(C++)
    なぜ、我々はVITEを必要としますか?