Next.js server component with react-stately Item component

[Cuttsy27]

I am using a ComboBox component (created with useComboBox) and passing it a group of Item components from react-stately. The component throws an error "Error: Unknown element <[object Object]> in collection." on the useComboBoxState hook, unless the parent component has "use client".

useComboBoxState is only used inside the ComboBox component which itself is a client component.

Can Item and Section react-stately components be rendered on the server?

[snowystinger]

We do render them in SSR in some tests. However, I don't know the difference between our tests and NextJS. https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/listbox/test/ListBox.ssr.test.js though the fact that we don't have an SSR test for our React Spectrum component worries me.

You may find this PR of interest #4913, it uses a newer, more flexible collection we'll eventually have documented everywhere.
In the meantime, though, you may find our implementation of Combobox for RAC of interest, or you may just want to use it directly.
https://react-spectrum.adobe.com/react-aria/ComboBox.html
https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/ComboBox.tsx

[devongovett]

Collection components like Item must be rendered from a client component, not a server component. You must have "use client" in the file where you render <Item> (or in a file above that).

The reason is that we traverse the JSX tree to find the items, specifically looking for elements with element.type === Item. However, server components / Next.js rewrites these to be React.lazy when they are rendered in a server component. That makes it impossible for us to tell what the actual type of the element is, hence the error you see here.

As Rob mentioned, in the future we'll have a new implementation of collections that works better with server components. However, that's not publicly exported yet since we are still working on it. So in the meantime, the solution is just to render the <ComboBox> and <Item> elements from a client component instead of a server component.

[tfirdaus]

@devongovett 👋
First of all, thanks for the fantastic works on this library 👏 .
I'm wondering if this implementation for better SSR support is still in the work?
Is there already a plan to make it available publicly and documented in the near future?

[devongovett]

SSR is supported already. Since the above post, collections in React Aria Components have had some improvements in that area.

Keep in mind that client components also SSR to HTML. That's different from server components (RSC), which only render on the server, and not on the client. There are very few components in React Aria where this would make sense since they all have some kind of user interaction, which by definition must happen on the client.