React

Suspense

Reactの標準コンポーネント。コンポーネントツリー内のサスペンドバウンダリとして動作する。

サスペンドバウンダリ配下でサスペンドが発生すると、 一番近い親の Suspense コンポーネントが受け取る。

「サスペンドの発生」とは「レンダリング中にPromiseをthrowする」こと。

Suspense コンポーネントには子コンポーネントとは別に fallback 属性でフォールバック用のコンポーネントが与えられる。受け取ったサスペンドが resolve されるまでは fallback 属性で受け取ったコンポーネントを子コンポーネントとして表示する。

受け取ったサスペンドの reject 時には何もしない。

fallback で与えられたコンポーネント自体がサスペンドした場合、さらに親の Suspense が受け取る。

ErrorBoundary

コンポーネントツリー内のエラーバウンダリを表すコンポーネント。

ErrorBoundary という名前のコンポーネントが存在するわけではなく、コンポーネントの種別。（ユーザー側の実装が必要）

具体的には「子コンポーネント内でthrowされたエラーを受け取るコンポーネント」を指す。

関数コンポーネントではエラーをcatchできないため、クラスコンポーネントでの実装が必要。

SSRとSuspense

New Suspense SSR Architecture in React 18
https://github.com/reactwg/react-18/discussions/37

React18以前までは Suspense はCSR時にのみ効果があり、SSR時は実質機能しなかった。SSRでは全てのPromiseが解決した後にHTMLを一括生成するモデルだったため、クライアント側はその出力を待つしかなかった。

React18にて、

• HTMLのストリーミング配信 → 準備できたHTMLパーツから順次クライアントに配信
• クライアント側での選択的ハイドレーション → パーツ単位でHTMLを受け取り、部分的にハイドレーション

の新機能が導入され、サーバー側でも Suspense を理解できるようになった。サスペンドした箇所はフォールバックとして扱いHTMLを生成してクライアントに送信、Promiseが解決したら都度HTML生成して送信、ということが可能になった。

非同期コンポーネント

さらにReact18では非同期コンポーネントという概念も生まれた。

Server Componentではコンポーネント自体を async 関数（非同期コンポーネント）として定義することができ、これによってコンポーネント内で await を使った処理が可能になる。

非同期コンポーネントはPromiseとして返されるため、コンポーネント自体が Suspense で受け突れるサスペンド可能な非同期処理の単位として扱えるようになった。

Suspense なしで非同期コンポーネントを使った場合は従来通り全てのPromiseが解決次第、HTMLを一括生成する。

MSW

先日書いたinstrument.tsによるnode設定は非推奨らしい。

instrument.tsはHRMに対応していないため。

layout.tsx上で読み込むのがいい？