Reactのサーバー側のレンダリング（SSR）は、サーバー上でHTMLを生成し、パフォーマンスとSEOを改善します。 1。SSRは、完全に形成されたHTMLをブラウザに送信し、認識された負荷時間を短縮します。 2.エンジンのインデックスコンテンツをすぐに検索するのに役立ちます。 3。CSRとは異なり、SSRは空白の畫面を回避し、ソーシャルメディアのプレビューを強化します。 4. ReactはReactDomserverを使用して、コンポーネントをHTML文字列にレンダリングします。 5.その後、ブラウザはページを水分補給してインタラクティブにします。 6.一般的なユースケースには、公開Webサイト、eコマースページ、および低帯域幅環(huán)境が含まれます。 7.課題には、複雑なセットアップ、データフェッチの問題、サードパーティのライブラリの制限、キャッシングの困難が含まれます。

Reactのサーバー側のレンダリング（SSR）は、ブラウザではなく、サーバー上でWebページの初期HTMLが生成される手法です。これは、誰かがあなたのサイトにアクセスしたとき、彼らはすぐに完全に形成されたHTMLページを取得することを意味します。JavaScriptがブラウザでページをロードしてビルドするのを待つことはありません。

これは、パフォーマンスが向上し、SEOの役割を果たすため、検索エンジンがHTMLで既にレンダリングされているコンテンツを簡単に読み取り、インデックスを作成できるためです。

クライアント側のレンダリングの代わりにSSRを使用するのはなぜですか？

ほとんどのReactアプリは、クライアントサイドレンダリング（CSR）を使用します。ここでは、ブラウザが最小限のHTMLシェルをダウンロードし、JavaScriptをロードしてコンテンツを入力します。それは正常に機能しますが、マイナス面があります：

• 読み込み時間が遅い：ユーザーは、すべてのJavaScriptが実行されるまで空白の畫面を表示します。
• SEOの課題：検索エンジンクローラーは、ページにインデックスを作成する前にJavaScriptが実行が終了するのを待たない場合があります。
• 事前にレンダリングされたコンテンツはありません：ソーシャルメディアのプレビューまたはボットは、ページの実際のコンテンツを表示しない場合があります。

SSRを使用すると、サーバーはユーザーが表示する必要があるコンテンツを既に含むHTMLを送信します。ブラウザは、すべてのJavaScriptが最初に実行されるのを待つことなく、ページ（アタッチイベントハンドラーとインタラクティブにする）を「水補給」する必要があります。

React SSRは実際にどのように機能しますか？

高いレベルでは、サーバー側のレンダリングがReactでどのように機能するかを次に示します。

1. ユーザーはページをリクエストします- 誰かがURLを入力したり、リンクをクリックしたりすると、リクエストがサーバーにヒットします。
2. サーバーレンダリングReactコンポーネント- サーバーでは、 ReactDOMServer.renderToString()または同様の方法を使用して、ReactコンポーネントからHTMLを生成します。
3. HTMLはブラウザに送信されます。ユーザーは、最初のUIで完全なHTMLページを取得します。
4. ページを「潤い」することを反応します。JSバンドルが到著すると、Reactは既存のHTMLに動作を取り付けて動的にします。

通常、このフローを処理するために、next.jsやReactdomserverを備えたカスタムエクスプレスサーバーなどのツールを使用します。

React SSRの一般的なユースケース

すべてのアプリにSSRが必要なわけではありません。しかし、速度やSEOが重要なものを構築する場合、SSRは有用になります。

一般的なシナリオは次のとおりです。

• SEOが重要なパブリックWebサイト（マーケティングページやブログなど）
• クイックロードとプレビュー共有が不可欠なeコマース製品ページ
• ローエンドデバイスまたは遅いネットワークをターゲットにしたアプリ、CSRが遅くなる

アプリがログインの背後にあり、検索エンジンによってインデックス化されることに依存していない場合、SSRは靜的生成（SSG）またはクライアント側のレンダリングよりも多くの利益をもたらさない可能性があります。

SSRで注意すべきこと

SSRはパフォーマンスとSEOを改善することができますが、いくつかのGotchasがあります。

• より複雑なセットアップ：現(xiàn)在、サーバーロジックとクライアントロジックの両方を扱っています。
• データの取得はトリッキーになる可能性があります。コンポーネントをレンダリングする前に、多くの場合、サーバーにデータを取得する必要があります。
• サードパーティライブラリは機能しない場合があります。一部のライブラリは、ブラウザで実行されており、サーバーレンダリング中に壊れていると仮定しています。
• キャッシュはより複雑になります。靜的HTMLとは異なり、サーバーレンダリングページはリクエストごとに異なる場合があります。

問題を回避するため：

• DOM関連のコードが水分補給後にのみ実行されることを確認してください
• 特にnext.jsのようなフレームワークで、慎重にasyncデータを使用する
• SSR中にサードパーティパッケージの動作方法をテストします

それがReactのSSRの背後にある核となるアイデアです。必ずしも必要ではありませんが、適切に使用すると、ユーザーにとってより良いエクスペリエンスと検索エンジンの可視性が向上します。

以上がReact SSRでのサーバーサイドレンダリングとは何ですかの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。