Open3

RSC 言語化できひんからまとめる

TsuboiTsuboi
  • クライアントでReact アプリが実行されると最初のHTMLは空の div 要素だけで、画面は真っ白。ブラウザがJSバンドルをダウンロードし、Reactがアプリを初期化して初めて、画面に結果が表示される。ネットワークの速度、アプリケーション・バンドルのサイズ、その他の要因によって、初期表示にめっちゃ時間かかる（SPA）
  • これを解消しようねってなったのが、SSR。ペイロードがブラウザに送信される前に、サーバーがReactコンポーネントを「プリレンダリング」し、レンダリング結果を静的なHTMLとして送信する仕組み。もっと簡単にいうとサーバーがReactコンポーネントを先に描画し、その結果をシンプルなHTMLとしてブラウザに送る方法。
  • ただ SSR にも問題があって、コンポーネントを完全にインタラクティブにし、期待通りに動作させるためには、クライアント上で ハイドレイト(サーバーで先に生成されたHTMLに、クライアント側で動的な機能を追加するための処理)させる必要があり、完全に動作させるためには、サーバーがHTMLと一緒に追加のペイロードを送信する必要がある。あと、SSRは最初のページロードのときだけしか起こらん
  • またまた問題はあって、Reactコンポーネントはすべてブラウザ（つまり「クライアント」）で実行されるため、「クライアント」コンポーネントとみなされていました。そのため、SSRによって静的HTMLのプリレンダリングが行われたとしても、Reactコンポーネントはクライアント上で実行されるまで、本当の意味でのレンダリングは完了せーへんよ。もっと簡単にいうとSSRで先にHTMLを作っても、そのコンポーネントが完全に動くためには、ブラウザでの処理が必要

ここまでがいわゆるPages Router

TsuboiTsuboi

RSC 使う（つまりApp Router）と救われるよ

サーバーコンポーネントを使うと、すべての処理がサーバーで行われ、完成したHTMLだけがブラウザに送られれる。余計な手間は不要やで。さらに、RSCはサーバーで動くので、特定のサーバー用のコードも直接使えるよん

function ServerComponent() {
  const db = new DB(); // connect directly to database
  // ...
  return <div>{/* show data */}</div>;
}

コンポーネントが完全にインタラクティブであるためには、クライアント上でハイドレイトする必要があるからそこは注意ね
以下はerrorなるよ

const ServerComponent = () => {
  function handleOnClick(event) {
    // ...
  }

  return <button onClick={handleOnClick}>Click Me</button>;
};

CC(Client Component)にしたい場合はファイルの先頭にuse clientと指定するだけ

TsuboiTsuboi

CC では SC をインポートできひんからそこは注意ね

'use client';

import { createContext, useMemo } from 'react';
import ServerComponent from './ServerComponent';

const Context = createContext();

const ClientComponent = () => {
  const value = useMemo({
    // ...
  });

  return (
    <Context.Provider value={value}>
      <ServerComponent />
    </Context.Provider>
  );
};

以下のようにしようね

'use client';

import { createContext, useMemo } from 'react';

const Context = createContext();

const ClientComponent = ({ children }) => {
  const value = useMemo({
    // ...
  });

  return <Context.Provider value={value}>{children}</Context.Provider>;
};