ReactのSSRプロジェクトとは何ですか？

react では、ssr は「Server Side Rendering」の略で、サーバー側のレンダリングを意味します。ssr は、これらの静的タグを使用して、同じコンポーネントをサーバー側の HTML 文字列にレンダリングし、ブラウザーに送信します。クライアント上で完全に対話型のアプリケーションとして「アクティブ化」します。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

reactのSSRプロジェクトとは

SSR:サーバーサイドレンダリング

データとHTMLの結合はサーバーサイドで完了し、クライアントはサーバーにリクエストを送信し、クライアントは接続された HTML を返し、クライアントはそれを表示するだけで済みます。

現在、多くのフロントエンド プロジェクトはシングル ページ アプリケーションになっています。優れたユーザー エクスペリエンスとフロントエンドとバックエンドの分離のために、独立したクライアント プログラムを個別に作成します。現在、クライアント アプリケーションを構築するための成熟したフレームワークが数多くあります。それらを直接使用したり、プロジェクトのニーズに合わせて変更したりできます。もちろん、独自のニーズに合わせて構築することもできます。

デフォルトでは、コンポーネントをブラウザに出力して DOM を生成し、DOM を操作してユーザー インタラクションを実現できます。ただし、同じコンポーネントをサーバー側の HTML 文字列としてレンダリングし、ブラウザーに直接送信し、最終的にこれらの静的マークアップをクライアント上の完全に対話型のアプリケーションに「アクティブ化」することが可能な場合があります。これがサーバー側のレンダリングです。 。

SSR を使用する理由

従来の SPA (シングル ページ アプリケーション) と比較して、サーバーサイド レンダリング (SSR) の主な利点は次のとおりです。

検索エンジン クローラーが完全にレンダリングされたページを直接表示できるため、SEO が向上します。

シングルページ アプリケーションのページは、ajax を通じてデータをリクエストし、動的にページを生成します。ただし、検索エンジン クローラーは JS によって生成されたコンテンツをクロールできないため、シングルページ アプリケーション プロジェクトに遭遇しても何もクロールできません。 SSR はサーバー側でページを生成してクライアントに送信し、ページ全体が表示されるため、About ページや Contact ページなどの SEO に便利です。

最初の画面で白い画面が表示される問題を解決しました。ネットワークの状態が遅い場合やデバイスの動作が遅い場合は、サーバーでレンダリングされたマークアップを表示する前に、すべての JavaScript のダウンロードと実行が完了するのを待つ必要がないため、ユーザーは完全にレンダリングされたページをより速く表示できます。多くの場合、ユーザー エクスペリエンスが向上します。

シングルページ アプリケーションを初めてロードするときは、アプリケーションを開始する前に、パッケージ化された (requirejs または webpack パッケージ化された) js をブラウザーに送信する必要があり、少し時間がかかります。 Web ページがサーバー側で事前レンダリングされ、ブラウザーに直接送信される場合、ユーザーは完全にレンダリングされたページをより迅速に表示できるため、通常はユーザー エクスペリエンスが向上します。

SSR ワークフロー

上の図からわかるように、サーバーは HTML コードのみを生成し、フロントエンドはmain.js はサーバー側で使用するための HTML を提供するコピーを生成します。これが React SSR の仕組みです。

推奨される学習: 「react ビデオ チュートリアル 」

以上がReactのSSRプロジェクトとは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。