CSR vs SSR

Webアプリケーションのパフォーマンスとユーザーエクスペリエンスを最適化する上で、CSRとSSRは重要な概念です。それぞれの特徴、メリット・デメリットを比較し、最適な選択肢を選ぶための参考にしてください。

CSR (Client-Side Rendering)

処理フロー

1. サーバーは、空のHTMLファイルとJavaScript、CSSファイルをクライアントに送信します。
2. クライアントは、受け取ったJavaScriptを実行し、初期レンダリングとデータの取得を行います。
3. サーバーから取得したデータに基づいて、クライアント側でDOMを操作し、UIを再レンダリングします。

メリット

• ページ遷移が速い: ページ遷移の際に、サーバーへのリクエストが不要なため、スムーズな操作感を実現します。

デメリット

• 初期表示が遅い: JavaScriptの実行とデータ取得が完了するまで、コンテンツが表示されないため、ユーザーは待たされることになります。
• SEOに不利: クローラーがJavaScriptを実行する必要があるため、コンテンツが正しく認識されない可能性があります。

SSR (Server-Side Rendering)

処理フロー

1. サーバー側で、表示に必要なデータを取得し、HTMLを生成します。
2. 生成されたHTML、JavaScript、CSSファイルをクライアントに送信します。
3. クライアント側でJavaScriptを実行し、ハイドレーションを行います。

メリット

• 初期表示が速い: サーバー側でHTMLが生成されるため、クライアントはすぐにコンテンツを表示できます。
• SEOに有利: サーバーから送信されるHTMLには、コンテンツが含まれているため、クローラーに正しく認識されやすいです。

デメリット

• ページ遷移が遅い: ページ遷移のたびに、サーバーへのリクエストが必要となるため、CSRに比べて遅くなります。
• サーバー負荷が高い: サーバー側でHTML生成処理を行うため、サーバー負荷が高くなる可能性があります。

まとめ

項目	CSR	SSR
初期表示	遅い	速い
ページ遷移	速い	遅い
SEO	不利	有利
サーバー負荷	低い	高い
開発複雑性	低い	高い

補足

• ハイドレーション: SSRで生成されたHTMLをクライアント側でJavaScriptと紐づけることで、インタラクティブな操作を可能にする技術です。
• Hydration Error: ハイドレーション時に、サーバーとクライアントでDOM構造の差異が発生した場合に起こるエラーです。

最後に

CSRとSSRは、それぞれ異なる特性を持っています。どちらを選択するかは、Webアプリケーションの要件や目的に合わせて検討する必要があります。