ホームページ > ウェブフロントエンド > jsチュートリアル > クライアント側レンダリングとサーバー側レンダリング

クライアント側レンダリングとサーバー側レンダリング

Linda Hamilton
リリース: 2024-11-30 05:04:17
オリジナル
690 人が閲覧しました

クライアント側レンダリング (CSR とも呼ばれます) は、ブラウザーが JS を使用してページ自体をレンダリングします。サーバーから既製のページを送信する代わりに、サーバーはブラウザーで実行され、ユーザーがサイトを操作するときにコンテンツを構築する JavaScript を提供します。継続的なページ読み込みが必要な、クライアント側レンダリング Web サイト (Facebook やその他のソーシャル メディアなど) の例が多数あります。

プロセス:

  • サーバーは初期 HTML ファイルを送信します。
  • クライアント側でサーバーから JS コードをダウンロードします。
  • JS コードは最終的な UI を出力します。

Client-side Rendering & Server-side Rendering

長所:
- よりダイナミックでインタラクティブな Web アプリケーション。
- ユーザーとあらゆるロードに、よりスムーズなエクスペリエンスを提供します。
- サーバー側リクエストの余分な必要性が減ります。

短所:
- 初期ロード時間が遅くなります。

サーバー側レンダリング (SSR とも略されます) は、サーバーがすべての動的コンテンツを含む完全に形式化された HTML ページを作成してクライアント側に送信することです。したがって、ブラウザーは追加の作業を行うことなくページを表示するだけです。その結果、すべての処理がサーバー側で行われるため、ユーザーはより高速にコンテンツを表示できます。たとえば、WordPress と github はサーバー側レンダリングに基づいているとどこかで読んだことがあります (間違っている場合は修正してください)

プロセス:

  • サーバーは Web ページのリクエストを受信し、必要なデータを取得して HTML に入力し、必要なスタイルを適用します。
  • これで、完全にレンダリングされたページがサーバーからブラウザに送信され、表示されます。
  • 最初のページ読み込みの場合、JS の種類は必要ありません。
  • その後のユーザー操作と更新は、クライアント側の JS レンダリングによって管理されます。

Client-side Rendering & Server-side Rendering

長所:
- 初回の読み込みが速くなります。
- 遅いネットワークでもユーザー エクスペリエンスが向上します。

短所:
- より多くのサーバー負荷が必要です。
- 複数回リクエストすると遅くなります

一言で言えば:
Client-side Rendering & Server-side Rendering

最後に、私自身の意見を付け加えておきますが、ソーシャル メディアやクライアント側のロジックを多く含む Web アプリケーションなど、対話性とユーザー エンゲージメントを最重要視するアプリケーションの場合、CSR が最適です。ただし、SEO に関心が高く、初期読み込み速度が速い Web サイトなど、コンテンツが重い場合は、SSR の方が良い選択肢になります。それはアプリケーションの性質と決定する対象ユーザーによって異なります。

したがって、開発者は長所と短所を注意深く分析することで、パフォーマンス、使いやすさ、検索性のバランスをとった適切なレンダリング戦略を決定することができます。

コーディングを楽しんでください。ありがとうございます。

以上がクライアント側レンダリングとサーバー側レンダリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート