Polymorphic React Components for Both the Client and the Server

Kirill is building the next generation of the CanDo React library full-time.

React Server Components promise a smaller bundle size, better performance, and improved data fetching.

View components assemble the actual slot, prepare its children, and ensure that components can be either client or server without affecting their children.

BackerUI is a design system framework currently being built by Kirill.

Rewriting the UI with Server Components was a bad idea because client components are still necessary for interactivity and some features.

A polymorphic data table is a single component that can be used both on the client and as a server component.

Kirill developed a server data table, which sends only HTML and interacts with the server, and a client component, which is interactive and works with browser APIs.

Key considerations include avoiding code duplication, allowing customization by consumers, and accommodating changing requirements.

The composition pattern allows mixing and matching server and client components within the rendering tree of a data table.

By not rendering their own children and separating their client logic into a client shell, components can be rendered as either client or server components.