Netflix がReact をやめて、SSRにしたらランディングページを 50% 高速化できたということらしいのですが、一方slackはReactで高速にしたとのことですが、この違いは何でしょうか？

https://jp.quora.com/Netflix-%E3%81%8CReact-%E3%82%92%E3%82%84%E3%82%81%E3%81%A6-SSR%E3%81%AB%E3%81%97%E3%81%9F%E3%82%89%E3%83%A9%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92-50-%E9%AB%98%E9%80%9F

https://jp.quora.com/Netflix-%E3%81%8CReact-%E3%82%92%E3%82%84%E3%82%81%E3%81%A6-SSR%E3%81%AB%E3%81%97%E3%81%9F%E3%82%89%E3%83%A9%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92-50-%E9%AB%98%E9%80%9F

Junji Uehara

 · 

フォロー

IT系企業に勤務更新日時:3年前

リンク先の記事：

• A Netflix Web Performance Case Study

で重要なのは

Netflix uses React on the client and server, but they identified that the client-side portion wasn't needed for the first interaction, so they leaned on what the browser can already do, and deferred client-side React.

です。詳しくいうと

• 変更前：
• ランディングページ(ログイン前のページ)とそれ以外のページ(ログイン以降の動画の再生ページなど)の両方をReactで開発し、
• その両方でSSR(Server Side Rendering)とClient Side Renderingの両方を行う

だったのを、

• 変更後：
• ランディングページ(ログイン前のページ)とそれ以外のページ(ログイン以降の動画の再生ページなど)の両方をReactで開発し、
• ランディングページではSSRのみ行い、Client Side Renderingは行なわない(SSRが生成したHTMLとCSSを使うが、仮想DOMベースReact.jsの実行にはつなげず、代替する専用のJSで実行を続ける)
• ランディングページ以外のページでは、SSRとClient Side Renderingの両方を行う(今までどおり)

にしたということです。ランディングページだけは動的な性質が低いので、Reactの通常のSSRレンダラを別に作った専用のものに差し替えて、仮想DOMで使うdom idも除去し、仮想DOMベースではない小さい専用のJS用のランタイムを組み込むのでしょう。更にそのランディングを見ている間に、reactランタイムや次ページ以降をプリフェッチするとか。

総論としてリンク先の記事が言っているのは、NetflixはReactを全然やめてなどおらず、Netflixサイトで全面的に使われつづけており、さらに特定箇所でクライアントレンダラを抑制しサーバサイドレンダリングのみに留めるなどのカスタマイズチューニングを行っており、こんなにReactは柔軟性が高くてすばらしいのですよ、ということです。

最高の速度を得るために、Reactを使わずに素のHTMLに書き直したり自前フレームワークに一部分でも脱却するようなことはしなかったし、する必要がなかった、というのがポイントです。

誤読している人もいるかもしれないのですが、Reactは速度が遅くなるので、場合によっては部分的に使うのをやめるのが適材適所だね、みたいな話とはまったく違います。リンク先の記事では

This is good news for React

という部分でそれを言っています。

---

自分の過去に投稿した記事、

https://jp.quora.com/Reactは今までのフロントエンド開発の何を解決したので

には書いたのですが、Reactは以下を実現するものです。

SPAを容易に開発する技法を提供しました。具体的には、
巨大な大域変数としてのDOMツリーを、以下によって分割統治。

1. 「Reactコンポーネント」単位でDOM構造の部分的な断片を定義していき、コンポーネントを組合せることでボトムアップにDOMツリーを構築する。
2. DOMツリーと同じ構造のバッキングストアを配備して、部分的な更新を行なえるようにする。
3. DOMツリー更新を高速にするための最適化を行う。(仮想DOM)

Netflixがやったのは、動的な性質が低いランディングページだけは、Reactランタイムを読み込む初期ダウンロードのオーバーヘッドが相対的に大きくなるので2と3はスキップし、遅延ダウンロードにして、1の利点のみをSSRで享受しましたよということです。2,3は利点ではあるものの、不可欠ではなく、スキップもできます。不可欠なのは1です。

Slackは全体的に動的である度合が大きいのでしょう。