ReactJSにおけるサーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）の徹底比較

2024-05-01

ReactJSにおけるサーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）の比較：詳細解説

ReactJSは、シングルページアプリケーション（SPA）を構築するためのJavaScriptライブラリです。SPAは、ユーザーがページ遷移することなく、アプリケーション全体を動的に操作できるウェブアプリケーションの一種です。

ReactJSアプリケーションを構築する際、レンダリング方法として2つの主要な選択肢があります。

サーバーサイドレンダリング（SSR）

SSRでは、レンダリング処理をサーバー側で行います。具体的には、ユーザーがリクエストを送信すると、サーバーはReactコンポーネントをHTMLに変換し、完全にレンダリングされたページを返します。

利点:

SEOに最適: 検索エンジンは、レンダリングされたHTMLを直接認識できるため、SEOに有利です。
初回読み込み速度の向上: ブラウザはJavaScriptをダウンロードして実行する必要がないため、初回読み込み速度が向上します。
ユーザーエクスペリエンスの向上: アプリケーションの読み込みが速く、スムーズなユーザーエクスペリエンスを提供できます。

サーバー負荷の増加: レンダリング処理をサーバー側で行うため、サーバー負荷が増加します。
複雑性の増加: SSRを実装するには、追加のサーバー側ロジックと設定が必要となります。

CSRでは、レンダリング処理をクライアント側（ブラウザ）で行います。具体的には、ユーザーがリクエストを送信すると、サーバーは最小限のHTMLを送信し、ブラウザはJavaScriptをダウンロードして実行し、Reactコンポーネントをレンダリングします。

開発の容易性: CSRは、SSRよりもシンプルな実装で済みます。

SEOへの影響: 検索エンジンはJavaScriptを直接認識できないため、SEOに不利となります。
ユーザーエクスペリエンスへの影響: 初回のレンダリングに時間がかかる場合、ユーザーエクスペリエンスが低下する可能性があります。

SSRとCSRはそれぞれ異なる利点と欠点があります。どちらを選択するかは、アプリケーションの要件と優先順位によって異なります。

以下は、それぞれのレンダリング方式が適している場合の例です。

SSR:
- SEOが重要なアプリケーション
- 初回読み込み速度が重要なアプリケーション
- ユーザーエクスペリエンスが重要なアプリケーション
CSR:
- サーバー負荷を軽減する必要があるアプリケーション
- 開発の容易性を優先するアプリケーション
- 複雑なインタラクティブ機能を備えたアプリケーション

補足:

React Routerなどのライブラリは、SSRとCSRの両方のシナリオで役立ちます。
Next.jsなどのフレームワークは、SSRとCSRを容易に実装できるようにします。
Node.jsは、SSRとCSRの両方で使用できるサーバーサイドランタイム環境です。

ReactJSにおけるサーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のサンプルコード

このセクションでは、SSRとCSRをそれぞれ実装する簡単なReactJSアプリケーションのサンプルコードを紹介します。

この例では、expressとreact-dom/serverを使用して、SSRを実装する簡単なアプリケーションを作成します。

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

const app = express();

app.get('/', (req, res) => {
  const App = require('./App');
  const html = ReactDOMServer.renderToString(<App />);

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>SSR Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => console.log('Server listening on port 3000'));

このコードは、以下のことを行います。

express と react-dom/server を必要なライブラリとしてインポートします。
express アプリケーションを作成します。
/ ルートパスへの GET リクエストを処理します。
App コンポーネントをインポートし、ReactDOMServer.renderToString を使用してHTMLに変換します。
HTMLを埋め込んだ完全なHTMLページをレスポンスとして送信します。
アプリケーションをポート 3000 で起動します。

// App.js
import React from 'react';

const App = () => {
  return (
    <div>
      <h1>CSR Example</h1>
      <p>This is a simple React application rendered on the client-side.</p>
    </div>
  );
};

export default App;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));