ルートエントリーはクライアント境界
@gunkin/uiifyからのインポートは手軽ですが、クライアント境界を作ります。Server Componentでは、"use client"ディレクティブを持たないコンポーネント専用のエントリーからインポートしてください。
// convenient: a client boundary
import { Accordion } from "@gunkin/uiify";
// server-compatible: no client JavaScript
import { Accordion } from "@gunkin/uiify/components/accordion";/client配下の制御バリエーション
制御コンポーネントには、値を保持して再レンダリングする場所が必要なため、必ずクライアント境界が必要です。このため、制御バリエーションはpropで切り替えず、/clientサブパスで提供します。
import { Modal } from "@gunkin/uiify/components/modal"; // uncontrolled, 0 kB
import { ModalClientContent } from "@gunkin/uiify/components/modal/client"; // controlledこれにより、ハイドレーションのコストは後から見るバンドルレポートではなく、記述したインポートに現れます。ハイドレーション前に動作するのは非制御コンポーネントです。
境界をまたぐ組み合わせ
Client Componentは、childrenとして渡されたServer Componentをレンダリングできます。コンテンツをサーバーに残しながら、対話的なシェルを小さく保てます。
// server component
<ClientShell>
<ExpensiveServerRenderedThing />
</ClientShell>React contextの回避
Tier 0ではReact contextを禁止します。Server Componentはcontextを使えないため、プロバイダーを介して通信するパーツはサーバーでレンダリングできません。代わりにHTML属性と決定的なIDでパーツをつなぎます。
@gunkin/uiify/elementsを使って構築する場合も同じルールに従います。ブラウザーはcommandfor、popovertarget、for、nameをJavaScriptなしで解決します。アーキテクチャを見る
ハイドレーション前
Tier 0コンポーネントはJavaScript無効のテストスイートをすべて通過し、表示だけでなく操作もできます。Tier 1はネイティブの状態が動作し、アイランドが追加する機能だけが使えなくなります。Tier 2は意味のあるマークアップを描画しますが、キーボードナビゲーション、フィルタリング、ARIAの同期はハイドレーション後に動作します。
各コンポーネントページでTierと実測した予算を示します。検証の根拠では、両者の算出方法を説明しています。