本文へ移動
uiify

はじめに

uiifyはハイドレーション前に動作する44のアクセシブルなReactコンポーネントです。ブラウザーのネイティブ機構を優先し、アクセシビリティに必要な部分にのみJavaScriptを使います。

ハイドレーション前に動作する理由

ストリーミングSSRでは、初回描画からハイドレーションまでに空白期間があり、遅れて届くSuspense境界ごとにその期間が生じます。その間、useStateのアコーディオンは表示されても操作できませんが、<details>ならすでに動作します。

44コンポーネントのうち29がTier 0です。クライアントJavaScriptは0 kBで、スクリプトを無効にした状態ですべての操作テストを通過します。それ以外は、コストとハイドレーション前の動作を明記しています。

想定する用途

適した用途: サーバーレンダリング、ハイドレーション前に動作するページ、独自のスタイリング。コンポーネントはセマンティックなマークアップと文書化されたdata-*契約を提供し、見た目のスタイルは含みません。

適さない用途: 導入直後から完成した見た目になるテーマ付きキットや、クライアント専用アプリ。その場合は、ハイドレーションを前提とするライブラリが向いています。

構成

hooks、core、elements、components、任意のstylesという5つのレイヤーをそれぞれ公開し、上位レイヤーはインポートしません。コンポーネントは標準でServer Componentであり、クライアント境界はすべてインポートパスで確認できます。

アーキテクチャを見る

はじめに