JavaScript - フロントエンドレンダリングとは何ですか?サーバーサイドレンダリングとは何ですか? 2 つの違いとそのアプリケーションシナリオは何ですか?

Question

ここでは、フレームワークを使用してフロントエンドで SPA を作成し、バックグラウンドでデータベース関連のデータを処理し、その前後でデータを RESTful API に渡します。これらのレンダリングについては、まったくわかりません。いわゆるサーバーサイドレンダリングとは、バックグラウンドで HTML ファイルを生成し、それをフロントエンドに渡すことを指します。

黄舟 · Answer

いくつかの言葉で明確に説明するのは難しいですが、以下のリンクを参照してください:
フロントエンドレンダリングとバックエンドレンダリング
バックエンドレンダリング HTML、フロントエンドテンプレートレンダリング HTML、および jquery の違いは何ですかhtml?
フロントエンドレンダリングとバックエンドレンダリングの間の議論に関する集中的な読書

ringa_lee · Answer

最初のレンダリングでは、データとテンプレートをHTMLにアセンブルするだけです。

フロントエンドとバックエンドの分離と SPA の場合、クリティカルパスでの認証によるリクエストのリダイレクトに加えて、バックエンドの一般的なルーティングロジックがフロントエンドとフロントエンドで共有されます。処理ロジックの一部もフロントエンドとバックエンドで共有されます。エンドはデータインターフェイスを提供し、インターフェイスに関連するデータ処理ロジックはバックエンドに固有です。

SPA シナリオの場合
サーバー側レンダリングは最初の get リクエスト用であり、ブラウザーに完全な HTML を生成するために使用され、ブラウザーは最初の画面を直接表示します。
クライアント側のレンダリングは、クライアントの状態の変更、データのリクエスト、ローカル DOM の変更 (ローカル領域は本体全体と同じくらい大きい場合があります) に関するものです。
react/vue このシナリオでは、サーバーは jsx/template を html に変換するだけで、クライアントは props/state の変更に従って仮想 dom と実際の dom の間の同期を調整します。

従来のフロントエンドとバックエンドの分離シナリオでは、
バックエンドは完全な HTML のレンダリングを担当し、フロントエンド JS は対話後のいくつかのテキストアニメーションなどの変更を担当します。フロントエンドのレンダリングはありません。

レビュー:

仮想 dom はフロントエンドにのみ存在し、仮想 dom と現実の dom の違いを調整し、現実の dom への更新を最小限に抑えるために使用されます。
フロントエンドレンダリングとは、データとテンプレートを解析し、DOMを生成することを指します。バックエンドと同じです。
はい、Web シナリオでも同じ意味です。
フロントエンドレンダリング: 小さな変更があるたびにサーバーに dom シーン全体を再生成するように要求したくありません。サーバー側のレンダリング: ほとんどのシナリオで、極端なシナリオはクライアント側で js が無効になっている場合です。フロントエンドレンダリングのみが使用されるシナリオの場合、会社の構造上、react/vue によるレンダリングが許可されていないと推定されます (ノードサーバーはまだデプロイされていません)。通常、フロントエンドとバックエンドの両方のレンダリングが存在します。

某草草 · Answer

IT 業界の悪い習慣は、具体的な詳細が分からないように派手な用語を作成することです:

バックエンドレンダリング: バックエンドプログラムは、HTML ページをフロントエンドに吐き出す前に、まず HTML ページ上の特定の領域と特定のシンボルにデータを埋めてから、それをフロントエンドにスローします。バックエンドレンダリング。いわゆるレンダリングです。レンダリングという言葉はもともとゲームの分野から来ており、ゲームの分野は単に紙に絵の具を塗ることを起源としています。。以前は、ほとんどのサーバーがこのモードでした

フロントエンドのレンダリング: バックエンドの HTML ページは静的ファイルとして存在し、フロントエンドがそれを要求すると、バックエンドはファイルにコンテンツの変更を加えず、それをフロントエンドに直接返します。フロントエンドがページを取得した後、HTML ページに記述されたコンテンツに従ってレンダリングし、HTML のコンテンツを変更 (ペイント) します。これはフロントエンドレンダリングです