ダッシュボードに6枚のカード、6つのスピナー、それらは一緒に表示されません — ドミノ倒しのように一つずつ表示されます。各カードは上のカードが完了してからロードを開始したからです。これがウォーターフォールで、合計待ち時間は最も遅いリクエストではなく、すべての合計です。use()とSuspenseはその連鎖を断ち切ります — しかし面白いのは内部のメカニズムです：サスペンドされたコンポーネントが実際に何をスローするのか、そして間違った順序で届いたHTMLがどのように正しい場所に収まるのか。
10年間、サムネイルをヒーロー画像にアニメーションさせるには一つの技法しかなかった：前後の位置を測定し、transformでその差を偽り、再生する。FLIP。すべてのアニメーションライブラリがそれを行い、すべてが最悪のタイミングでメインスレッドのJavaScriptという代償を払ってきた。View Transitions APIはそのトリック全体をブラウザに移し、React 19.2とNext.js 16以降、契約全体はnameという一つのpropだけになった。
「use server」は、APIルートへのfetch呼び出しに対する単なるシンタックスシュガーのように見えます。だからこそ、多くの実装はこれをただの関数呼び出しとして扱ってしまいます。これは具体的な代償を伴う誤解です。「use server」と記されたすべての関数は、ネットワーク上の公開エンドポイントになります。そして、この仕組みの上に作られたフォームは、JavaScriptが読み込まれる前から動作します。このディレクティブの裏側で実際に何が起きているのか、そしてドキュメントを一目見ただけでは分からない落とし穴がどこにあるのかを確認していきます。
正しいHTMLはあくまで出発点にすぎない。アクセシビリティツリーの実際の仕組み、ARIAが思っている以上に害になるケース、そして実際に動くアコーディオン・ライブリージョン・Next.jsのフォーカス制御を一緒に作りながら見ていく。
