React を使用したサーバー側のレンダリング

公開: 2021-05-27

Reactについて少し

React は、Facebook 開発者コミュニティによって作成および管理されているオープン ソースのフロントエンド JavaScript ライブラリです。 ユーザー インターフェイスまたは UI コンポーネントを構築するために使用されます。

ただし、この定義は初心者には完全に理解できるとは限りません。 React の簡単な説明から、非常に詳細な技術的説明までを紹介する完璧なブログ投稿があります。ここで見つけることができます。

Web ページの旅 | サーバーからブラウザへ

サーバー サイド レンダリングとは何かを理解するには、まず、Web ページが画面にどのように表示されるかの概要を把握することが重要です。これは、以下の図で説明されています。

ssr-with-react-webpage-server-to-browser
  1. Web サイトの URL を入力するか、Web サイトへのリンクをクリックすると、ブラウザーは URL で識別される適切なサーバーにいくつかのファイルの要求を送信します。
  2. サーバーは、HTML ファイルや JavaScript ファイルなどの一部のファイルをブラウザーに送信します。
  3. ブラウザはこれらのファイルをダウンロードして「レンダリング」または処理し、要求した Web ページを表示して操作することができます。

これは、Web ページの行程を非常に単純化しすぎていますが、このタスクを実行するためのさまざまなサブステップとさまざまな方法 (サーバー サイド レンダリングを含む) を説明するための十分な序文です。

「通常の」クライアント側レンダリング Web ページの旅

前のセクションで説明したプロセスをさらに深く掘り下げると、ユーザーの画面に Web サイトを表示するために、長い間使用されてきたクライアント サイド レンダリングまたは CSR と呼ばれる手法があります。 これについては、次の図で説明します。

ssr-with-react-csr-webpage-rendering
  1. Web サイトの URL を入力するか、Web サイトへのリンクをクリックすると、ブラウザーは URL で識別される適切なサーバーにいくつかのファイルの要求を送信します。
  2. サーバーは、画像ファイル、CSS ファイル、JavaScript ファイルなどの他のアセットへの参照を含む HTML ファイルを送信します。
  3. ブラウザーはサーバーに再度要求を送信し、HTML ファイルで参照されている CSS および JavaScript ファイルを含むすべてのファイルをダウンロードします。
    1. これは、ユーザーの接続状態が悪く、JavaScript ファイルのサイズが大きい場合、Web サイトの読み込み時間が長くなる要因となる可能性があります。
  4. これらのファイルがブラウザーによってダウンロードされると、ブラウザーはフレームワークまたはライブラリ (React など) を実行し、Web ページをインタラクティブにする役割を担う JavaScript ファイルを解析します。
    1. 速度の最適化の観点から、この点はクライアント マシンに依存し、クライアントが低電力のハードウェアである場合、これにはかなりの時間がかかる可能性があります。
    2. これらの手順が実行されているとき、ユーザーにはまだロード画面が表示されます
  5. 最終的に Web ページが完全にロードされ、ユーザーは Web ページを表示して操作できるようになります。

上記の手順で明らかなように、ユーザーの観点からは、必要なすべてのファイルがクライアント マシンによってダウンロードおよびレンダリングされた後、最後の手順でのみ Web サイトを表示および操作できます。

フレームワークの実行と JavaScript ファイルの解析におけるクライアント マシンのパフォーマンスに依存するため、これには膨大な時間がかかる場合があります。

サーバー側レンダリング Web ページの旅

一言で説明すると、Server Side RenderingまたはSSRは、CSRの場合のように、クライアント側のJavaScriptフレームワークWebサイトを取得し、クライアントではなくサーバー上で静的なHTMLおよびCSSにレンダリングするプロセスです.

以下は、Web ページが React を使用してサーバー サイド レンダリングを使用してたどる過程を図で表したものです。

ssr-with-react-ssr-webpage-rendering-with-react
  1. Web サイトの URL を入力するか、Web サイトへのリンクをクリックすると、ブラウザーは URL で識別される適切なサーバーにいくつかのファイルの要求を送信します。
  2. サーバーは、CSR のように単純な HTML ファイルを送信するだけでなく、 react-dom/serverからインポートされたrenderToString関数を使用してアプリを文字列にレンダリングします。
    1. 次にこれが index.html ファイルに挿入され、ブラウザに送信されます。
    2. これは、機能的に言​​えば、クライアント マシンではなくサーバーがページをレンダリングする場所であるため、SSR の核心がある場所です。
  3. ブラウザーはこの HTML ファイルをレンダリングし、ビューがブラウザーに取り込まれます。
    1. ただし、これはまだインタラクティブではありませんが、ユーザーは Web ページの最終的なビューを見ることができます。
  4. ブラウザーはサーバーに再度要求を送信し、HTML ファイルで参照されているすべてのファイル (JavaScript ファイルを含む) をダウンロードします。
  5. すべてのスクリプトがダウンロードされると、React コンポーネントがクライアントで再びレンダリングされます。 ただし、今回は既存のビューを上書きするのではなく、ハイドレートします。
    1. ビューを「ハイドレートする」とは、レンダリングされた DOM (ドキュメント オブジェクト モデル) 要素にイベント ハンドラーをアタッチするが、レンダリングされた DOM 要素をそのまま保持することを意味します。 このようにして、DOM 要素の状態が保持され、ビューのリセットは発生しません。
  6. Web ページが最終的に完全にロードされ、ユーザーはステップ 3 自体で表示できたページを操作できるようになりました。

したがって、ユーザーの観点から見た最大の視覚的変化の 1 つは、Web ページが非常に迅速に「見える」ようになることです。これは、ブラウザーの観点から言えば、HTML のレンダリングはそれほどリソースを消費しないためです。

これにより、本質的に非 SSR アプリよりもページの読み込みが速くなるわけではありませんが、JavaScript ファイルがバックグラウンドでダウンロードおよび解析された後、Web ページがインタラクティブになるため、Web ページのビューがユーザーに提供されます。 これは、TTI、つまり、インタラクティブになるまでの時間 (これは、ユーザーが Web ページを要求してから Web ページが完全にインタラクティブになるまでにかかる時間です) が、Web ページが表示されるまでにかかる時間よりも少し長いことを意味します。ブラウザで。

したがって、SSR シナリオでは、最初のレンダリング時間を短縮するために、HTML と CSS はユーザーにとって意味のあるものである必要があり、読み込みが遅延されるため、JavaScript は HTML と CSS の拡張機能になる可能性があります。

React を使用した SSR の動作に関する一般的な誤解は、ユーザーが新しいデータを要求するなどの変更が行われるたびに、サーバーがすべての手順を再度完了し、新しい UI を含む HTML ファイルをブラウザーに送信するというものですが、そうではありません。 . ページの部分的な更新のみが行われます。 レンダリングはサーバーによって行われますが、ファイナライズされた出力は、前に説明したように「水和」することによって DOM に挿入されます。

ssr-with-react-pros-cons-of-ssr

サーバー側のレンダリング | 使用する場合と使用しない場合

  • 強力な SEO が必要な場合は、検索エンジンがクロールしやすい SSR を選択してください。
  • ブログ、ニュース Web サイト、静的な Web サイト、テキストの多い Web サイトなど、コンテンツに重点が置かれ、インタラクションには重点が置かれていない Web サイトの場合、SSR は、Web サイトの核心、つまりコンテンツを高速で読み込むため、恩恵を受けることができます。
  • ブラウザに送信するファイルをレンダリングして生成するには、サーバー側で時間と労力がかかります。 したがって、サーバーと運用の予算が少ない場合は、サーバーに大量のリクエストが送信されるため、SSR を実装しない方がよいでしょう。
    • ただし、Firebase などのプロバイダーを使用すると、クラウド機能でコンテンツを動的に生成でき、サーバーはそれを CDN キャッシュに保存できます。
    • これにより、次にユーザーが要求したときに、ファイルの生成がサーバーによって再度行われることはなくなります。 むしろ、ローカルの CDN エッジから提供されるだけであり、ユーザーの観点から読み込み時間を改善し、サーバー リソースの使用も抑えます。

React は SSR にどのように適していますか?

React は、仮想 DOM (ドキュメント オブジェクト モデル) の概念を組み込んでいるため、SSR を実装するための優れた選択肢です。

これにより、開発者は React アプリの仮想バージョンを作成し、それをサーバー自体に含めることができます。

これにより、前述の renderToString 関数を使用して簡単に HTML にレンダリングし、それをブラウザーに送信して、ブラウザーが非常に迅速にレンダリングし、クライアント マシン上に仮想バージョンを作成できるようにします。

したがって、この仮想バージョンがサーバーから送信された HTML と一致するという事実を見ると、React はそれを再レンダリングしないため、対話時間 (TTI) が減少し、Web ページの読み込みが「高速」になります。

SSR、一日中、毎日！

すべてに対応できる万能のソリューションがあればいいのにと思いますが、特に新しいテクノロジーの場合はそうではありません。 SSR には多くの利点がありますが、前述のように、SSR が適切な選択ではない場合があります。 高度にインタラクティブなサイトがその先駆けとなっています。

そこで登場するのが Creole Studios です。当社には一連の技術専門家がおり、技術の世界で出現するほぼすべての新しい技術に常に遅れをとっていません。 私たちはお客様のビジネス ニーズを理解し、SSR アプリであれ CSR アプリであれ、カスタマイズされたソリューションを提供します。私たちがあなたのために面倒な作業を行っている間、何も心配する必要はありません。 私たちに連絡して、あなたのアイデアを頭からアプリに取り入れてください!