流暢なReact

第6章. サーバ側React

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

Reactはその誕生以来、大きく進化してきた。Reactはクライアント側のライブラリとして始まったが、サーバー側の レンダリング（SSR）の需要は、この章で理解できるようになる理由から、時間とともに高まってきた。一緒にサーバー側のReactを探求し、それがクライアントのみのReactとどのように異なるのか、そしてReactアプリケーションをレベルアップするためにどのように使用できるのかを理解しよう。

以前の章で説明したように、Reactは当初、効率的でスケーラブルなUIのニーズに対応するためにMeta社によって開発された。第3章では、開発者がUIコンポーネントを簡単に作成・管理できるようにする仮想DOMを通じて、Reactがどのようにこれを実現するかを見てきた。Reactのクライアントサイド・アプローチは、ウェブ全体で高速でレスポンスに優れたユーザ体験を実現した。しかし、ウェブが進化し続けるにつれて、クライアントサイド・レンダリングの限界が明らかになった。

クライアントサイド・レンダリングの限界

クライアントサイド・レンダリング（CSR）は、Reactが2013年にオープンソースソフトウェアとしてリリースされて以来、ユーザ・インタフェースを構築するための主要なアプローチだった。 やがて、このアプローチには多くの制限が現れ始めた。これらの限界は、最終的に私たちがより多くの懸念をサーバ側に移すことにつながった。

SEO

クライアントサイド・レンダリングの重大な制限の1つは、検索エンジン クローラーの中にはJavaScriptを実行しないものがあるため、コンテンツが正しくインデックスされない可能性があることだ 、JavaScriptを実行するものでも、期待通りに実行されない可能性がある。

検索エンジンのクローラーの実装は多種多様であり、その多くが独占的で一般には知られていないという事実を考慮すると、クライアントのみのレンダリングは、特定のWebサイトやアプリケーションのリーチに関してやや疑問が残る。

とはいえ、2015年のSearch Engine Landの記事には、様々な検索エンジンがクライアント専用のアプリケーションでどのように機能するかをテストする実験がいくつか紹介されており、そこにはこのような記述があった：

私たちは一連のテストを実行し、Googleが多数の実装でJavaScriptを実行し、インデックスできることを確認した。また、Googleがページ全体をレンダリングしてDOMを読み取り、動的に生成されたコンテンツをインデックスできることも確認した。

本稿執筆時点で、GoogleとBingはクライアントのみのWebサイトをインデックスするのに十分なほど進んでいることが発見されたが、結局のところ、これは広大で得体の知れない独自の海の中の1つの研究プロジェクトに過ぎない。

このように、クライアントのみのアプリケーションは最新の検索エンジンとうまく機能するかもしれないが、サーバベースの対応するものがないことには固有のリスクがある。従来のWebアプリケーションでは、ユーザや検索エンジンのクローラがページをリクエストすると、サーバはそのページのHTMLをレンダリングして送り返す。HTMLにはすべてのコンテンツ、リンク、データが含まれており、ページのコンテンツはすべてテキスト、つまりマークアップ以外の何ものでもないため、検索エンジンのクローラーがコンテンツを読み取り、検索エンジンの検索結果にインデックスすることは容易である。 ...