Von PreReact zu React und Next.js Eine Reise durch Web-Rendering und Leistungsoptimierung-js-Tutorial-php.cn

Von PreReact zu React und Next.js Eine Reise durch Web-Rendering und Leistungsoptimierung

Patricia Arquette

Freigeben： 2024-10-04 06:18:29

Original

1027 Leute haben es durchsucht

この記事では、React の起源、それが解決する問題、そして

について探っていきます。 Next.js が作成された理由。 Next.js が SSR (サーバーサイドレンダリング) を提供していることは広く知られていますが、SSR の本当の意味と SSR が CSR より優れている理由について詳しく説明します (client-サイドレンダリング)、場合によっては。

簡単な歴史: React.js 以前

React.js が CSR (クライアントサイドレンダリング) の概念を普及する前、ほとんどのアプリケーションは従来の MPA (マルチページアプリケーション) モデルに従いました。 MPA では、サーバーが HTML のレンダリングを処理しましたが、このプロセスには利点と欠点の両方があることがわかります。

From PreReact to React and Next.js A Journey Through Web Rendering and Performance Optimization

ご覧のとおり、ページのレンダリングは簡単でした。サーバーにリクエストを送信すると、必要な HTML のセットアップに時間がかかり、それを送り返すと、ページが読み込まれます。

それで、何が問題なのでしょうか?この段階では、それはありません。実際、このアプローチは、少なくとも最初は React.js がページの読み込みを処理する方法よりも効率的であるように見えます。ただし、ユーザーがページの操作を開始したときに問題が発生します。仮説的なシナリオを見てみましょう:

ページに入ります。
ログイン (クライアント -> サーバー (認証用) -> DB (ユーザーの確認)) してログインし直します。ここでは問題ありません。
たとえば、投稿ページ (クライアント -> サーバー -> DB (投稿の取得)) に移動し、投稿データに戻ります。ここでは問題ありません。
新しい投稿を作成 (クライアント -> サーバー (新しい投稿) -> DB (新しい投稿の追加))、完全に新しい HTML で戻ります。ここで問題が発生します。新しい投稿を追加するとき、またはページに変更を加えるとき、サーバーは HTML 全体を最初から再レンダリングする必要があります。これにより、全ページの再レンダリングが発生し、非効率となる可能性があります。この完全な再レンダリングは、ページ上の何かを更新または変更するたびに行われます。

それが、react が修正しようとしていたものです

From PreReact to React and Next.js A Journey Through Web Rendering and Performance Optimization

次に React.js を入力します

React はどのように問題を解決しましたか?

React は、クライアントサイドレンダリング (CSR) という革新的な コンセプトを導入しました。 CSR は、HTML をサーバー上でレンダリングするのではなく、クライアントのブラウザ上でレンダリングします。
しかし、これはどのように機能するのでしょうか?、最初にページをロードするときにサーバーが HTML を提供する必要があるとすると、

これで何が起こります: サーバーは 初期 HTML スケルトン を送信しますが、実際のコンテンツは含まれていません。代わりに、

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2267

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2400

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2014