35

最近、クライアントとサーバーのレンダリング全体に関する非常に興味深い記事を読んでいます。

http://www.onebigfluke.com/2015/01/experimentally-verified-why-client-side.html

http://www.quirksmode.org/blog/archives/2015/01/angular_and_tem.html

http://tomdale.net/2015/02/youre-missing-the-point-of-server-side-rendered-javascript-apps/

クライアント側に関しては、私は少しファンボーイでしたが、これらの記事を読んだ後、驚いたことに、サーバー側のレンダリングを支持するいくつかのポイントが現れ始めました...主なポイントは次のとおりです。

  • 1）サーバーはアップグレードできますが、ユーザーのデバイスはアップグレードできません-つまり、サーバーを制御しているため、パフォーマンスが低下している場合は、アップグレード/スケーリングを選択できます. ユーザーにデバイスのアップグレードを強制することはできません。

  • 2)最初のペイントと最後のペイント-experimentally verified...上記のリンクでは、ユーザーが最初にページを表示したとき (最初のペイント) と、ユーザーがページを 100% 使用する可能性があるとき (最後のペイント) を示しています。ユーザーがページを見たときに考えられることから、脳が視覚野から前頭皮質、そしてユーザーが実際に指をクリックし始める運動前皮質への信号を処理するのに時間がかかります。もちろん、html が最初にレンダリングされる場合は、バックグラウンドで読み込みが行われている間に脳が処理するもの (js ファイル、バインディングなど) があります。

本当に気になったのは、クライアント側のレンダリングに最大 10 秒の読み込み時間がかかると Twitter が報告したことでした。誰もそれを経験するべきではありません! それは、「十分なデバイスをお持ちでない場合は、申し訳ありませんが、お待ちいただくだけです」と言っているようなものです。

クライアント側とサーバー側の両方のテンプレート エンジンを使用し、クライアントとサーバーの両方で同じテンプレート エンジンとコードを使用する良い方法はありませんか。その場合、レンダリングされたページをクライアントに提供することが恩人であるか、クライアントに自分でレンダリングさせるかを判断するだけです。

いずれにせよ、必要に応じて、私のことわざや記事についての考えを共有してください. ぜひ聞きたいです！

4

2 に答える 2

22

UPD：本当に必要な場合にのみ実行してください

(4 年後、2 つの同形エンタープライズ アプリ)

SSRをする必要がある場合は、問題ありません。シンプルなSPAを使用できる場合は、それを使用してください。

なんでそうなの？SPA は、開発とデバッグが容易で、安価で実行も容易です。

開発とデバッグの複雑さは明らかです。しかし、「安くて使いやすい」とはどういう意味ですか? 10,000 人のユーザーが静的な HTML Web サイト (つまり、構築された SPA) と同時にアプリを開こうとしても、それを感じることさえありません。ただし、同形の webapp を実行している場合は、TTFB が増加し、RAM の使用量が増加し、最終的にそれらのクラスターを実行する必要があります。

したがって、非常に短い TTFB 時間を表示する必要がない限り (積極的なキャッシングによって発生する可能性があります)、生活を複雑にしすぎないでください。

2015年の元の回答：

基本的に、フロントエンドとバックエンドで同じコードを共有する同形の Web アプリを探しています。

同形 JavaScript

クライアント側とサーバー側の両方で実行される JavaScript アプリケーション。アイソモーフィック JavaScript フレームワークは、JavaScript フレームワークの進化における次のステップです。これらの新しいライブラリとフレームワークは、従来の JavaScript フレームワークに関連する問題を解決しています。

この男は私よりもずっとうまく説明していると思います。

ここに画像の説明を入力

そのため、ユーザーがページにアクセスすると、サーバーはコンテンツを含むページ全体をレンダリングします。そのため、ロードが速くなり、データなどをロードするための追加の ajax リクエストは必要ありません。その後、ユーザーが別のページに移動すると、シングル ページ アプリケーションの通常の手法が使用されます。

それで、なぜ私は気にするのですか？

  • 古いブラウザ / 弱いデバイス / Javascript が無効になっている
  • SEO
  • ページ読み込みの改善

古いブラウザ / 弱いデバイス / Javascript が無効になっている

たとえば、IE9 は History API をサポートしていません。そのため、古いブラウザーの場合 (およびユーザーが JavaScript も無効にしている場合)、古き良き時代と同じようにページをナビゲートするだけでした。

SEO

Google はSPA をサポートしていると言っていますが、SPA は Google 検索の上位の結果に表示される可能性は低いですよね?

ページ速度

前述のとおり、最初のページは 1 つの HTTP リクエストで読み込まれ、それだけです。

わかりました。

それに関する多くの記事があります：

しかし、気にする必要がありますか？

もちろん、それはあなた次第です。

ええ、それは素晴らしいことですが、既存のアプリを書き直したり適応させたりするには多くの作業が必要です。また、バックエンドが PHP/Ruby/Python/Java/Whatever である場合は、悪いニュースがあります (必ずしも不可能というわけではありませんが、ほぼ不可能です)。

ウェブサイトにもよりますが、いくつかの統計を収集しようとすることができます。古いデバイスを使用しているユーザーの割合が少ない場合は、苦労する価値がないので...

彼らを苦しめましょう

古いデバイスを使用しているユーザーのみを気にする場合は、2015 年です。iPod Touch 2 で Web サイトを閲覧するのに IE8 を使用しているユーザーの問題です。たとえば、Angular は約 1 年前に 1.3 で IE8 のサポートを終了しました。では、アップグレードが必要であることをユーザーに警告しないのはなぜですか ;)

乾杯！

于 2015-11-22T18:46:51.180 に答える