SSRという用語についてほとんどの人が誤解していること

サーバーサイド レンダリング (SSR) という用語は誤解されることが多く、その作成以前の慣行や、技術的に適格ではない慣行を説明するために使用されています。 PHP テンプレートから React の同形アプリに至るまで、SSR の定義は進化し、それをめぐる混乱も同様です。

この記事では、SSR の起源、SSR の本当の意味、そして現代の Web 開発においてこの区別を理解することがなぜ重要なのかについて詳しく説明します。

それで、これが取引です

PHP の時代には SSR はありませんでした。その用語は存在しませんでした。 2010年代に作られました。それまでは誰もこれをSSRと呼んでいませんでした。

彼らはそれを何と呼んでいましたか?ウィキペディアを信じるなら、それは (クライアント側のスクリプトとは対照的に) サーバー側のスクリプト と呼ばれていました。

面白い事実: Wikipedia を確認すると、2021 年になるまで サーバーサイド スクリプティング の記事に「SSR」さえ追加されていませんでした。違いは次のとおりです。正直に言うと？これは間違っていると思います。

---

SSRの前にはこんなのがあった…

React で「レンダリング」という用語が導入されるまで、私たちはその言葉を使用していませんでした。私たちが持っていたものに最も近いものは、サーバー側のテンプレートでした。これが古いスナップショットです。

アイデアは単純でした。静的サイト ジェネレーター または サーバー スクリプト を使用して動的 Web ページを構築します。

「サーバー テンプレートを使用すると、サーバー上でレンダリングされることになる」と主張する人もいます。

---

それの問題点

React でのレンダリングは、必ずしも HTML や DOM を生成することを意味するわけではありません。 VDOM (仮想 DOM) を生成します。 renderToString を呼び出すと、コンポーネントが実際に HTML にレンダリングされるため、線がぼやけます。

これが、人々が自分の PHP アプリが SSR を実行していると主張し始めた理由です。しかし、ここに問題があります。これにより、実際の SSR と通常の動的スクリプトとの区別が失われます。

---

主な違い

SSR を実行できるのは、クライアントでもレンダリングできるパーツに対してのみです。

例:

const App = () => <div onClick={handleClick}>Hello</div>;

このアプリはサーバー上で 1 回、クライアント上で 1 回の計 2 回実行できます。

しかし:

<div><?php echo "Hello"; ?></div>

これはクライアントでは実行できません。ここにはレンダリングはなく、「クライアント側」または「サーバー側」の区別はありません。これは単なる昔ながらの動的スクリプトです。

---

SR対SSR

もうこうした古い用語を使う人はいないので (おそらく ASP を除いて)、私はあきらめて、それを サーバー レンダリング (SR) と サーバーサイド レンダリング ( SSR)。

大きな違いの 1 つは 水分補給です。

PHP の世界には水分補給はありませんが、それでも SSR があると確信しています。それは意味がありません。ハイドレーションを持っている場合のみSSRを獲得できます。

---

水分補給: 鍵

React には 2 つの主要なメソッドがあります:

• renderToStaticMarkup: ハイドレートが期待されていない HTML を生成します。これはサーバー テンプレートに近いです。
• renderToString: クライアント上でハイドレートされる HTML を生成します。こちらはSSRです。

Angular Universal には 2023 年まで SSR はありませんでした。彼らが持っていたのは SR でした。サーバー上で HTML を生成し、スクリプトが読み込まれたらそれをドロップし、アプリを SPA として空の にレンダリングします。タグ。

これは PHP と同じではありませんが、実際の SSR と同じでもありません。

---

初期の頃

初期の React アプリは、ヘッドレス Chrome を使用して「プリレンダリング」され、HTML 文字列として保存されていました。そのスナップショットは CDN に保存されました。技術的には、これを機能させるためにサーバーは必要ありませんでした。 ?

これは無意味な試みでしたが、ある時点で Google が SEO のためにそれを推奨しました。一度その記事を追跡しましたが、再度見つけることができるかどうかはわかりません。

---

なぜこれを気にするのでしょうか?

React Server Components (RSC) により、このトピックを再検討する必要がありました。

技術的には、RSC は SSR を行いません。これには多くの人が驚きました。

React チームはそれを説明しようとしましたが、断念しました。要点は、サーバー コンポーネントは単なるテンプレートであり、静的な HTML を生成するということです。クライアント コンポーネントは SSR を経由して HTML と DOM の両方を生成します。

---

Inertia.js と SSR

Inertia.js も同様の区別を行います。 PHP はサーバー上で実行されますが、JavaScript アプリはサーバー上で実行されて HTML を生成し、クライアント上でハイドレートすることによって SSR 化されます。

---

では、PHP は SSR を実行できますか?

いいえ。 RSC と同様に、PHP は SSR を実行するステップで ダイナミック スクリプト (SR) を実行します。

Hono のようなミドルウェアを使用して React アプリを実行し、動的コードを HTML に挿入し、後で renderToString を呼び出す場合も、同様に感じられます。どちらもSSR一歩上のSRです。

だからこそ、「90 年代に PHP で SSR を実現した」と人々が主張するのはばかばかしいのです。

---

SSGについてはどうですか？

私がこのことを話すたびに、誰かが SSG について尋ねます。私は気にしない。

静的サイト生成 (SSG) という用語は、実際には React よりも前から存在していました。 SSG は HTML を生成することを意味します。レンダリングやハイドレーションは必要ありません。 HTMLを作成しましたか?おめでとうございます。SSG をやっています。

---

リアクトイノベーション

React フレームワークは、ハイドレーションを使用してクライアント上で HTML を再作成せずに採用する、同型アプリ を導入しました。

その HTML は SSR によって作成される必要がありました。

---

Qwik と「再開可能性」

Qwik は水分補給を行いますか?それが大きな疑問です。

Qwik 開発者はノーと言っていますが、私はイエスに傾いています。 Qwik が好きなら、別の SSR を切り取って、それを 再開可能性 と呼ぶ必要があります。

---

読むよりディスカッションを聞きたい場合は、Go の React Server コンポーネントに関するこのポッドキャスト エピソードから、音声形式でこれらの議論の詳細を聞くことができます

以上がSSRという用語についてほとんどの人が誤解していることの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。