React 同型アプリケーションとは

React では、同形アプリケーションとは、クライアントとサーバーの間でコードを完全または部分的に共有するアプリケーションを指します。これらはユニバーサル JavaScript アプリケーションとも呼ばれます。同形アプリケーションはブラウザを必要としません。サーバー側では、サーバー側とブラウザ側のレンダリングのバランスを実現し、サーバー上でレンダリング コンテンツを生成することで、ユーザーが情報を含むページをできるだけ早く確認できるようにします。

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

反応同型アプリケーションとは

同型アプリケーションはユニバーサル `JavaScript` アプリケーションとも呼ばれ、クライアントとサーバーの間でコードを完全 (または部分的に) 共有することを指します。サーバー側でアプリケーションの JavaScript コードを実行すると、ブラウザに送信される前にページにコンテンツを事前に入力できるため、ユーザーはブラウザの JavaScript が実行される前にコンテンツを確認できます。ローカル JavaScript が実行されている場合、後続の対話操作とナビゲーション操作が引き継がれるため、ユーザーは高速な初期読み込みとサーバー側のページ レンダリングを通じて、単一ページ アプリケーションでスムーズな対話エクスペリエンスを得ることができます。

同型性とは

Node.js の突然の台頭により、フロントエンドとバックエンドの開発には、標準化されたプログラミング言語、ページ テンプレート、メカニズムなどすべてに、フロントエンドとバックエンドの統合を実現する機会があります。 React がこの傾向を最初にリードし、同型性の概念はより広く普及しました。

読者が理解する必要があるのは、同型アプリケーションではブラウザ側でコンテンツをレンダリングする必要はなく、サーバー側とブラウザ側のレンダリングの間でバランスを取る必要があるということです。では、このバランスをどうやって理解すればいいのでしょうか？

ユーザーが情報を含むページをできるだけ早く表示できるように、サーバー上でレンダリング コンテンツを生成します。完全なアプリケーションには、純粋な静的コンテンツに加えて、さまざまなイベント応答、ユーザー インタラクションなどが含まれます。これは、イベントのバインドや非同期対話の処理などの作業を完了するには、JavaScript スクリプトをブラウザー側で実行する必要があることを意味します。

パフォーマンスとユーザー エクスペリエンスの観点から、サーバー側のレンダリングはページの最も重要で核心的な基本情報を表現する必要がありますが、ブラウザー側はさらなるページ レンダリング、イベント バインディングなどを完了する必要があります。インタラクションのための機能強化。いわゆる同型性とは、フロントエンドとバックエンドが一連のコードまたはロジックを共有することを意味します。この一連のコードまたはロジックでは、理想的な状況は、既存の DOM 構造と、その後のレンダリング プロセス中にレンダリングされる構造を判断することです。ブラウザ側でも同じですか? そうであれば、DOM 構造は再レンダリングされず、イベント バインディングのみが必要になります。

この観点から見ると、同型性はサーバー側のレンダリングとは異なります。同型性はサーバー側のレンダリングとブラウザー側のレンダリングの交差点に似ています。サーバー側とブラウザー側の違いを補います。これにより、同じコードまたはロジックのセットを均一に実行できます。同型写像の核心は「同じコードの集合」であり、両端の角度とは別の次元です。

同型性の利点と欠点

同型性の利点は次のとおりです。

パフォーマンスが向上します。ここでのパフォーマンスとは主に、レンダリングの高速化、最初の画面の表示時間の高速化、ファイル数の減少、ファイル サイズの縮小を指します。

SEO 最適化サポート。リクエストを受信すると、サーバーは初期コンテンツを含む比較的完全な HTML ドキュメントを返します。これは、検索エンジン クローラーが情報を取得し、検索結果の表示ランキングを向上させるのに役立ちます。同時に、ページの読み込み時間の短縮により、検索結果の表示ランキングの向上にも役立ちます。

実装はより柔軟です。サーバー側レンダリングではページの最初のコンテンツのみが出力され、ブラウザーはページの最終的なプレゼンテーションを完了するために引き続きフォローアップ作業を行う必要があります。このようにして、サーバー側のレンダリングとブラウザ側のレンダリングのバランスを保つことができ、コードの再利用を大幅に実現できます。

メンテナンス性が向上。 React などのライブラリの助けを借りて、幅広いコードの再利用を実現でき、サーバーとブラウザが 2 つのコードまたはロジックのセットを同時に維持する必要がなくなるからです。その結果、全体のコード量が減り、メンテナンスコストが削減されます。

下位モデルの方が使いやすい。コンテンツの最初のレンダリングはサーバー側で完了するため、ローエンド モデルに優しく、ページの読み込み時に白画面が発生することもありません。

過酷なネットワーク環境にさらに優しい。従来のフロントエンドとバックエンドの分離方法では、すべての JavaScript スクリプトがダウンロードされて実行された後にのみページ コンテンツが表示されますが、その過程で大量のネットワーク リクエストが発生し、過酷なネットワーク環境では、ページの基本的なコンテンツをレンダリングすることが間違いなく困難になります。この点において、同型アプリケーションには明らかに利点があります。

ユーザーエクスペリエンスの向上。サーバー側とブラウザー側のレンダリング コンテンツのバランスをより適切に保つために、ページの重要なコア部分をサーバー側で完了するように設計し、重要性の低いインタラクティブな部分をブラウザーによって、またはブラウザー側でレンダリングできるように設計できます。導入すると、ユーザー エクスペリエンスが大幅に向上します。

同型性の欠点は次のとおりです。

サーバー側の処理ロジックが増加し、複雑さが増します。

サーバーはブラウザ側のコードを完全に再利用することはできません。

サーバーの TTFB (最初のバイトまでの時間) 時間を追加しました。 TTFB 時間は、ブラウザが最初のネットワーク要求を開始してからサーバーから最初のバイトを受信するまでの時間を指します。これには、TCP 接続時間、HTTP リクエストの送信時間、および応答メッセージの最初のバイトを取得する時間が含まれます。データの取得とページの最初のコンテンツのレンダリングにより、サーバーが戻る速度が必然的に低下するためです。

知識の拡大:

バックエンド アーキテクチャ設計とサーバー側レンダリングの概念

サーバー側レンダリングまたはダイレクトの概念レンダリングはますます人気が高まっています。 React に基づいてサーバーサイド レンダリングを実装する方法を理解する前に、サーバーサイド レンダリングの「過去と現在」をアーキテクチャ レベルで全体的に理解する必要があります。なぜそのような概念が登場するのか、どのような問題が発生する可能性があるのか​​を理解する必要があります。この概念が実装されると解決されます。サーバー側レンダリングと他の方法の長所と短所は何ですか?

フロントエンドとバックエンドの連携技術の進化

Web開発の初期の頃、アーキテクチャ設計はシンプルかつ直接的で、具体的にはJSP、PHPによってページが生成されていました。とサーバー側の他のエンジニアは、ブラウザーはショーのみを担当していました。当時、フロントエンド エンジニアは静的ページに動的なインタラクティブ効果を追加するだけでよく、データ ロジックなどはほとんど関与しませんでしたが、バックエンド エンジニアはページのコンテンツ、つまりユーザーがページのコンテンツを作成する責任を負っていました。ページをリクエストすると、バックエンドがそれを処理して、完全な静的ページを返しました。これらのプロセスは通常、テンプレート エンジンに依存して完了します。そのため、当時はフロントエンドエンジニアという独立したポジションすら存在していませんでした。たとえ存在するとしても、フロントエンドとバックエンドの間の責任分担が不明確であるなど、このアプローチの欠点は明らかです。

フロントエンド担当者がテンプレートを開発すると、フロントエンドはバックエンド環境に大きく依存し、開発効率を最大化することが難しくなると同時に、データ形式に関するコミュニケーションコストが発生します。比較的高い。さらに、このようなアーキテクチャ モデルでは、フロントエンド テクノロジの開発とブラウザ機能の使用のためのスペースが非常に限られています。

フロントエンド テクノロジーの急速な発展、特に AJAX や Node.js などのテクノロジーの登場により、フロントエンドとバックエンドを分離するアーキテクチャ モデルが登場しました。このモードでは、フロントエンドとバックエンドの間の役割分担が非常に明確になり、両端の重要なコラボレーション ポイントは AJAX インターフェイスです。次の図に示すように、このモデルを段階的に理解するために、ユーザー アクセス ページを例に挙げてみましょう。

[関連する推奨事項:

JavaScript ビデオ チュートリアル 、 Webフロントエンド＃＃＃】＃＃＃

以上がReact 同型アプリケーションとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。