Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

12章サーバーサイドReact

これまではクライアントサイドのReact、つまりブラウザで動作するユースケースのみに絞って話を進めてきました。Reactはアプリケーションのビューを提供するためのライブラリなので、通常はブラウザ上で実行されます。しかしながら、今日のWebアプリケーションはクライアントサイドだけで完結せず、必ずバックエンドで何らかの処理を行うため、Webアプリケーション開発者は、クライアントとサーバーの両方にまたがる形でアプリケーションをとらえる必要があります。

たとえバックエンドのサーバーを自前で持たずにクラウドですべてを行っている場合でも、少なくともデータの送受信が発生します。そのような場合、クライアントとサーバー間のHTTPリクエストのやり取りによる遅延をなるべく抑えなければいけません。

そのような問題を解決するために、アイソモーフィック（isomorphic）なWebアプリケーションが考案されました。アイソモーフィックなアプローチとは、初回の描画をサーバーサイドで行うことで、シングルページアプリケーション（SPA）の苦手とする、初期表示のスピードやSEO（検索エンジン最適化）の問題を改善することです。Reactの提供するサーバーサイドレンダリングの機能を使うことで、アイソモーフィックなReactアプリケーションを実装することが可能です。

本章ではまず、よく混同されるアイソモーフィックJavaScriptとユニバーサルJavaScriptの違いについて論じます。また、それらの概念がReactとどう関連するのか考察します。そして、実際にアイソモーフィックなアプリケーションを実装します。最後に既存のレシピのアプリケーションをサーバーサイドレンダリングに対応させます。 ...