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
リンク先の記事：
で重要なのは
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ツリーを、以下によって分割統治。
- 「Reactコンポーネント」単位でDOM構造の部分的な断片を定義していき、コンポーネントを組合せることでボトムアップにDOMツリーを構築する。
- DOMツリーと同じ構造のバッキングストアを配備して、部分的な更新を行なえるようにする。
- DOMツリー更新を高速にするための最適化を行う。(仮想DOM)
Netflixがやったのは、動的な性質が低いランディングページだけは、Reactランタイムを読み込む初期ダウンロードのオーバーヘッドが相対的に大きくなるので2と3はスキップし、遅延ダウンロードにして、1の利点のみをSSRで享受しましたよということです。2,3は利点ではあるものの、不可欠ではなく、スキップもできます。不可欠なのは1です。
Slackは全体的に動的である度合が大きいのでしょう。
0 コメント:
コメントを投稿