Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Server Componentsは誰のためのものか?

noyan
October 12, 2023
380

React Server Componentsは誰のためのものか?

noyan

October 12, 2023
Tweet

Transcript

  1. React Server Components の仕組み React の Server Components は、サーバーでコンポーネントをレンダ リングする。

    SSR はブラウザで実行できるコードをサーバーで実行するが、RSC は サーバーでのみレンダリングするコンポーネントを実装する。 既存のコンポーネントと組み合わせて、サーバーとクライアントの両 方を行き来できるようにする。 クライアントへ配信するコード量を減らす 直接バックエンドにアクセスできる 2
  2. 以下の形でコンポーネントを利用できる。 // Parent.js import Component from "./Component.js"; function Parent() {

    return <Component />; } // Component.js "use client"; export default function Component() { let [state, setState] = useState(false); return <OtherClientComponent onClick={() => setState(true)} value={state} />; } 3
  3. この時、RSC のレンダリング結果はシリアライズされた形で Client に 配信される。 M1:{"pika":"chu"} J0:["$","div",null,{"children":[["$","h1",null,{"children":"React Server Components example"}],[["$","p",null,{"children":"Hello,

    world!"}],["$","@1",null,{}]]]}] 実装する時間がなかったので uhyo さんの記事から拝借しています。 https://zenn.dev/uhyo/books/rsc-without-nextjs/viewer/client- component 4
  4. 嬉しいところ これまで努力していた部分が React 側の仕組みに乗っかる形で改善で きるようになる 自然にラウンドトリップが減る クライアントサイドで実行する必要のないコードはそもそも配信さ れない Stream と

    Suspense を組み合わせて、ローディング周りの体験を最 適化できる 配信される JS が削減されるので、TTI が減少 再レンダリングの計算コストも改善 6
  5. 嬉しくないところ:でも結局 SSR は必要になる JSON ライクなペイロードで配信されるため、FCP や SEO を考慮す ると SSR

    が必要 「最初は SSR して、その後は RSC で」となった時、RSC が必要な タイミングはいつだろう? Server Component は Client からインポートできない( 全ての Server Component は Root と接続していなければならない) Server Component は Props の変更に応じて出力を切り替えるこ とができるが、状態を持たない Server Component は自ら再レン ダリングすることはない 8
  6. 嬉しくないところ:でも結局 SSR は必要になる どうもページ遷移しか対象ではなさそう 画面遷移のタイミングであれば、既存の技術はそこまで問題はな い 逆にページ遷移ごとにサーバー側でレンダリングしていると体験 が悪い(link の prefetch

    が必須になってくる) 動的に StyleSheet を生成する(runtime) CSS in JS 系ライブラリと は相性が悪い(Concurrent に続き... ) RSC を活用するために、クエリパラメータを盛大に活用するのか? 9