App Routerと相性の良いUIの対応Componentを比較してみる

はじめに

React Server Componentsの登場以降、一部のコンポーネントをサーバーサイドでレンダーし、アプリケーションのパフォーマンスと開発体験を向上しようという動きが加速しています。NextJSになってもRSCをふんだんに用いてApp Routerが構築されており、フロントエンド開発に大きな影響を与えています。
UI Componentの開発でも、クライアントサイドでdynamicにレンダリングするより、サーバサイドでstaticにレンダリングすることで、パフォーマンスの向上が期待できます。この記事では、App RouterにおけるUI開発での対応Componentを比較します。対象となるものは以下の5つです。

https://headlessui.com/

https://nextui.org/

https://mui.com/base-ui/getting-started/

https://www.radix-ui.com/

https://ui.shadcn.com/

比較表は執筆時点のものになります。SSR対応を表明しているか、HeadlessなUI Componentを提供しているものが中心になります。LibraryもComponent集も含めて比較しています。

hooksベースではReact AriaやDownshiftがあります。

比較表

Components	Headless UI	NextUI	MUI base	Radix UI	shadcn/ui
Accordion(DIsclosure)	⚪︎	⚪︎	(Planned)	⚪︎	⚪︎
Alert Dialog				⚪︎	⚪︎
Aspect Ratio				⚪︎	⚪︎
Autocomplete	⚪︎		⚪︎
Avatar		⚪︎		⚪︎	⚪︎
Badge		⚪︎	⚪︎		⚪︎
Button		⚪︎	⚪︎		⚪︎
Calender					⚪︎
Card		⚪︎			⚪︎
Checkbox		⚪︎	(Planned)	⚪︎	⚪︎
Checkbox Group		⚪︎
Chip		⚪︎
Circular Progress		⚪︎
Click-Away Listener			⚪︎
Code		⚪︎
Collapsible				⚪︎	⚪︎
Comboxox					⚪︎
Command					⚪︎
Context Menu				⚪︎	⚪︎
Data Table					⚪︎
Date PIcker					⚪︎
Dialog	⚪︎			⚪︎	⚪︎
Divider		⚪︎
Drawer			(Planned)
Dropdown Menu		⚪︎		⚪︎	⚪︎
Focus Trap			⚪︎
Form(Form Control)			⚪︎	⚪︎(Preview)	⚪︎
Hover Card				⚪︎	⚪︎
Image		⚪︎
Input		⚪︎	⚪︎		⚪︎
Kbd		⚪︎
Label				⚪︎	⚪︎
Link		⚪︎
Menu Bar(Menu)	⚪︎		⚪︎	⚪︎	⚪︎
Modal		⚪︎	⚪︎
Navigation Menu		⚪︎		⚪︎	⚪︎
No-SSR			⚪︎
Pagenation		⚪︎	(Planned)
Popper			⚪︎
Popover	⚪︎	⚪︎		⚪︎	⚪︎
Portal			⚪︎
Progress		⚪︎		⚪︎	⚪︎
Radio Group	⚪︎	⚪︎	(Planned)	⚪︎	⚪︎
Rating			(Planned)
Scroll Area				⚪︎	⚪︎
Select(ListBox)	⚪︎		⚪︎	⚪︎	⚪︎
Separator				⚪︎	⚪︎
Sheet					⚪︎
Skelton		⚪︎			⚪︎
Slider			⚪︎	⚪︎	⚪︎
Snackbar			⚪︎
Snippet		⚪︎
Spacer		⚪︎
Switch	⚪︎	⚪︎	⚪︎	⚪︎	⚪︎
Table		⚪︎			⚪︎
Table Pagenation			⚪︎
Tabs	⚪︎	⚪︎	⚪︎	⚪︎	⚪︎
TextArea		⚪︎	⚪︎		⚪︎
Tranasition	⚪︎
Toast				⚪︎	⚪︎
Toggle				⚪︎	⚪︎
Toggle Group			(Planned)	⚪︎
Toolbar				⚪︎
Tooltip		⚪︎	(Planned)	⚪︎	⚪︎
User		⚪︎

まとめ

対応しているComponentは結構バラバラですね。App Routerが登場してから日が浅いので、まだまだ発展途上感はあります。必要なComponentをベースに組み合わせていくのが良さそうです。Mantineの対応Component数は100を超えているので、それと比べるとどれも貧弱です。他のUI Library等もSSR対応してくる可能性は高いので、まだまだ様子見した方が良さそうです。