Reactのサーバーサイドレンダリング (SSR)とは

Reactのサーバーサイドレンダリング (SSR)

サーバーサイドレンダリング (SSR) とは、クライアントサイドだけでなく、サーバーサイドでReactコンポーネントをレンダリングする方法のことを指します。

なぜSSRを利用するのか？

1. 初期ロードの高速化: ブラウザが完全なHTMLページを受け取ることで、ユーザーはより速くページの内容を見ることができます。
2. SEOの向上: 検索エンジンはJavaScriptの実行に対応していない場合があるため、サーバーサイドでレンダリングされたページは検索エンジンにより良好にクロールされる可能性があります。

SSRの基本的な実装

Reactの ReactDOMServer モジュールは、ReactコンポーネントをHTML文字列としてレンダリングする関数、特に renderToString() を提供しています。

import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);

上記のHTML文字列は、サーバーのレスポンスとしてクライアントに送信され、初期ページロード時にクライアント上で再レンダリングされることなく表示されます。

注意点

• SSRを実装する際には、ブラウザ特有のAPI（例: window や document）を直接利用することができないため、そのようなAPIを利用するコードはクライアントサイドのみで動作するように注意が必要です。
• Reactコンポーネント内で非同期データの取得を行う際は、そのデータがサーバーサイドで正しく取得・レンダリングされるようなロジックの実装が必要になります。