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

はじめに

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

比較表

ComponentsHeadless UINextUIMUI baseRadix UIshadcn/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対応してくる可能性は高いので、まだまだ様子見した方が良さそうです。