ReactはクライアントサイドのJavaScriptライブラリとして非常に人気がありますが、サーバーサイドでのレンダリングも可能です。サーバーサイドレンダリングによって、初回読み込み時の表示速度を改善することができます。本記事では、Reactでのサーバーサイドレンダリングの基礎について解説します。
サーバーサイドレンダリングとは
サーバーサイドレンダリングとは、サーバー上でコンポーネントをレンダリングし、HTMLを生成することです。クライアントサイドレンダリングでは、コンポーネントをブラウザ上でレンダリングするため、JavaScriptの処理が必要となります。初回読み込み時には、JavaScriptのダウンロード・実行が必要となるため、表示速度が遅くなることがあります。一方、サーバーサイドレンダリングでは、HTMLを生成するため、JavaScriptの処理が不要となります。そのため、初回読み込み時の表示速度を改善することができます。
サーバーサイドレンダリングの実装方法
Reactでのサーバーサイドレンダリングは、Node.js上で実行することができます。以下は、Reactでのサーバーサイドレンダリングの基本的な実装方法です。
react-dom/serverモジュールのrenderToString()関数を使って、コンポーネントを文字列に変換します。
import ReactDOMServer from 'react-dom/server';
import App from './App';
const html = ReactDOMServer.renderToString(<App />);
- 変換された文字列を、HTMLのテンプレートに埋め込んでレスポンスを返します。
import express from 'express';
import ReactDOMServer from 'react-dom/server';
import App from './App';
const app = express();
app.get('/', (req, res) => {
const html = ReactDOMServer.renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Reactサーバーサイドレンダリング</title>
</head>
<body>
<div id="root">${html}</div>
<script src="client.js"></script>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
このようにして、サーバーサイドレンダリングを実装する
ことができます。ただし、注意点がいくつかあります。
- コンポーネントのstateやイベントハンドラは、サーバーサイドレンダリングでは動作しません。クライアントサイドでJavaScriptが実行された後に、初めて動作するようになります。
- クライアントサイドでのJavaScriptの実行によって、サーバーサイドで生成されたHTMLが書き換えられる可能性があります。そのため、サーバーサイドレンダリングを実装する場合は、クライアントサイドのJavaScriptのコードにも注意が必要です。
まとめ
Reactでのサーバーサイドレンダリングは、初回読み込み時の表示速度を改善するために有用です。react-dom/serverモジュールのrenderToString()関数を使って、コンポーネントを文字列に変換し、HTMLのテンプレートに埋め込んでレスポンスを返すことができます。ただし、クライアントサイドでのJavaScriptの実行によって、サーバーサイドで生成されたHTMLが書き換えられる可能性があるため、注意が必要です。