はじめに
React Server Componentsの登場以降、一部のコンポーネントをサーバーサイドでレンダーし、アプリケーションのパフォーマンスと開発体験を向上しようという動きが加速しています。NextJSになってもRSCをふんだんに用いてApp Routerが構築されており、フロントエンド開発に大きな影響を与えています。
UI Componentの開発でも、クライアントサイドでdynamicにレンダリングするより、サーバサイドでstaticにレンダリングすることで、パフォーマンスの向上が期待できます。この記事では、App RouterにおけるUI開発での対応Componentを比較します。対象となるものは以下の5つです。
比較表
| 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対応してくる可能性は高いので、まだまだ様子見した方が良さそうです。
フィシルコムのテックブログです。クッキーレスに合わせたマーケティングSaaSを開発しています。 マイクロサービス・AWS・NextJS・Golang・GraphQLに関する発信が多めです。 カジュアル面談はこちら（corp.ficilcom.jp/recruit/engineer-apply）から
Discussion