SSRとCSRの違い

サーバーサイド レンダリング (SSR) と クライアント サイド レンダリング (CSR) は、Web ページをロードして表示する 2 つの異なる方法です。あなたのブラウザ。簡単に説明しましょう:

1.クライアントサイド レンダリング (CSR)

• 仕組み: Web サイトを開くと、ブラウザーは最初に空の HTML ページといくつかの JavaScript コードをダウンロードします。その後、JavaScript がデバイス (クライアント) 上で実行され、画面上に Web ページが構築されます。

• 例: レゴ ブロックの箱を開けると、説明が表示されると想像してください (JavaScript)。次に、ブロック (サーバーからのデータ) を受け取った後、自分でレゴ モデル (ウェブページ) を構築します。

• 長所:

  • ページが読み込まれると、サーバーから新しい HTML を読み込み続ける必要がないため、ページ間の移動が非常に高速になります。
  • ページが頻繁にリロードされない、Facebook や Gmail などのシングルページ アプリケーション (SPA) に適しています。

• 短所:

  • 何も表示されない前にブラウザが JavaScript をダウンロードしてページを構築する必要があるため、最初のページが表示されるまでに時間がかかることがあります。
  • 検索エンジンは JavaScript で構築されたページを簡単に読み取ることができない可能性があるため、SEO (検索エンジン最適化) には適していません。

2.サーバーサイド レンダリング (SSR)

• 仕組み: SSR では、サーバーが Web ページを構築する作業を行います。 Web サイトにアクセスすると、サーバーは完全に構築された HTML ページをブラウザーに直接送信するため、すぐに表示できます。

• 例: レゴ ブロックを渡される代わりに、誰かがすでにモデルを構築し (サーバー)、完全に完成したモデルをあなたに渡すだけ (ウェブページ) だと想像してください。

• 長所:

  • サーバーが重労働のほとんどを実行するため、特に低速デバイスを使用しているユーザーにとって、初期ロード時間が短縮されます。
  • 検索エンジンは事前に構築された HTML を簡単に読み取ることができるため、SEO に優れています。

• 短所:

  • 新しいページごとにサーバーからフェッチして再構築する必要があるため、ページ間の移動が遅くなる可能性があります。
  • Web サイトはすべてのユーザーに対してすべてのページを作成する必要があるため、多くの人が一度に Web サイトにアクセスしようとすると、サーバーが過負荷になる可能性があります。

まとめ：

• CSR: ブラウザは JavaScript を使用して Web ページを構築します。一度読み込まれると速くなりますが、最初は遅くなります。
• SSR: サーバーは Web ページを構築し、ブラウザに送信します。最初は速いですが、ページ間のナビゲーションでは遅くなります。

最新のアプリの多くは、両方の技術を 組み合わせ して、両方の長所を最大限に活用しています。

以上がSSRとCSRの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。