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

クライアントサイド レンダリング (CSR) は、最新の Web 開発における一般的な手法であり、インタラクティブで動的なアプリケーションの作成に使用されます。この手法を使用すると、ページをレンダリングする責任をサーバーから取り除き、ページをクライアント側に移し、サーバーにとって最も重要なこと、つまりビジネス ルールをサーバーに任せることができます。この分離により、より流動的で動的なユーザー エクスペリエンスを提供できるようになり、新しいタイプのアプリケーションの作成が可能になりました。利点は多様ですが、同時に、この手法を採用する価値があるかどうかをプロジェクトごとに評価する必要があるトレードオフもあります。

クライアントサイド レンダリング (CSR) とは何ですか?

クライアント側レンダリング または単に CSR は、インターフェイスのレンダリングがクライアント側 (ブラウザー) で行われる動的アプリケーション開発手法です。これは、この手法が普及する以前の方法とは異なります。サーバーがページのレンダリングを担当し、すべてのコンテンツがすでに組み立てられた HTML ファイルをクライアントに返していました。

CSR では、ページをレンダリングする役割をブラウザ (クライアント) に渡します。サーバーは、JavaScript ファイルへのリンクを内部に含む基本的な HTML ファイルを送信するだけです。この HTML を受信すると、ブラウザーはページ コンテンツのレンダリングを担当する参照された Javascript ファイルをダウンロードします。 CRS の利点は、JavaScript ファイルがロードされると、サーバーへの新しいリクエストに依存せずにコンテンツを動的に更新できることです。ユーザーのブラウジング エクスペリエンスをよりスムーズにします。 CSR は通常、シングルページ アプリケーション (SPA) など、リアルタイムの対話や非常に動的なコンテンツが必要なアプリケーションで使用されます。 SEO を必要としない内部ページ、ダッシュボード、システム用のソリューションです。

クライアントサイド レンダリングはどのように機能しますか?

クライアント側レンダリングを使用したレンダリング フローの例は次のようになります:

1. ユーザーは Web ページにアクセスし、内部的にサーバーにリクエストを送信します。
   

2. サーバーはリクエストを受信し、実質的に JavaScript と CSS ファイルへのリンクのみを含む基本的な HTML を送信して応答します。
   

3. ブラウザはこの HTML をダウンロードし、完了すると、HTML 内で参照されている JavaScript および CSS ファイルをダウンロードするための新しいリクエストを送信します。
   

4. JavaScript ファイルがダウンロードされると、それが実行され、ページのレンダリング処理が行われます。
   

5. この時点から、JavaScript はアプリケーション全体とユーザーの対話を制御し、サーバーへの新しいリクエストを行わずにページのコンテンツを動的に更新します。

クライアントサイドレンダリングの利点

• 速度: 初期読み込み後にサーバーに複数のリクエストを行う必要がないため、CSR 内のページ間のナビゲーションは非常に高速です。
• ユーザー エクスペリエンス: CSR の使用法は非常に理解しやすく、パフォーマンスも良好で、ネイティブ アプリケーションと同様のエクスペリエンスを提供します。
• 懸念事項の分離: CSR により、フロントエンドとバックエンドの分離が可能になり、フロントエンドを JS で完全に管理できるようになり、バックエンドはデータとビジネス ロジックのみを処理できるようになります。

クライアントサイドレンダリングの欠点

• 高い JS 負荷: 大規模なアプリケーションでは、JS ファイルが非常に重くなり、特にアプリケーションの初期読み込み時にユーザー エクスペリエンスが損なわれる可能性があります。
• SEO の問題: ページのコンテンツはクライアント側でレンダリングされるため、検索エンジンはレンダリングされた HTML を必要とし、CSR を備えたアプリケーションでは HTML が実質的に空であるため、コンテンツのインデックス作成が困難になります。これは、ランディング ページ や e コマース などの SEO に依存するアプリケーションにとっては不利になる可能性があります。
• クライアント依存: アプリケーションはクライアント側で実行されるため、アプリケーションが持つリソースの量に依存するため、デバイスのリソースが少ない場合、ユーザー エクスペリエンスに悪影響を及ぼす可能性があります。さらに、デバイスで JavaScript の実行が無効になっている場合、アプリケーションは動作しません。

結論

この記事では、CSR の活用に関する主な重要なポイントを示し、基本とその利点と欠点を示します。 CSR フローを通じて、私たちは CSR ライフサイクルの主要な段階を把握します。完全にクライアント側で実行されるアプリケーションを提供する上で JavaScript が重要であることがわかります。 ユーザー エクスペリエンスに関連する CSR の利点にもかかわらず、このレンダリング手法には、高い JavaScript 負荷や SEO 関連の問題に関連するいくつかの欠点があることは明らかです。

CSR の制限を克服するために、静的サイト生成 (SSG) や サーバーサイド レンダリング (SSR) などのソリューションがあります。 SSG では、ビルド 期間中にページが静的に生成され、その結果、HTML がクライアントに配信される準備が整います。 SSR の場合、レンダリングはサーバー側で行われ、サーバー側はすでにレンダリングされた HTML でクライアントに応答します。

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