Support react server components

[danteissaias]

Add "use client" directive to the output bundle. https://beta.nextjs.org/docs/rendering/server-and-client-components#convention

[benoitgrelard]

Hey @danteissaias, you should be able to add "use client" on your side for now.

[danteissaias]

Yeah, however would be good to have this already included in radix's bundle.

[benoitgrelard]

We may eventually do this, I don't think there's any rush yet though considering RSC is pretty much bleeding edge for now.

[tony1658]

React Server components are in beta for now. I agree with benoitgrelard on revisiting this once a stable release has dropped.

For now you can create a wrapper around your components and put "use client" on top.

"use client"
import * as Checkbox from '@radix-ui/react-checkbox';
import { CheckIcon } from '@radix-ui/react-icons';
import '../globals.css';

export default function StyledCheckbox() {
  return (
    <form>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Checkbox.Root className="CheckboxRoot" defaultChecked id="c1">
          <Checkbox.Indicator className="CheckboxIndicator">
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Root>
        <label className="Label" htmlFor="c1">
          Accept terms and conditions.
        </label>
      </div>
    </form>
  )
}

Maybe some bundlers or tools strip out the "use client" convention, so even if support got added in radix-ui, other tools also needs to support it: nrwl/nx#13194.

RSC for now

RSC RFC v2: reactjs/rfcs#227

Seems like Next.js is nearing a stable release.
Next.js App dir with RSC: https://nextjs.org/blog/next-13-3

We are closing in on marking App Router as stable in the next minor release and are shifting our focus to optimizing performance, enhancing behaviors, and fixing bugs.

[danteissaias]

As of today Vercel have sthbilized the Next.js app directory. We should take another look at first-class support for React server components in Radix UI.

[tony1658]

If we want to start investigating if the maintainers are okay with it. Someone could open an issue and a draft PR. Contributions are welcome 😃. It seems like a small change but Radix is used by many developers. We want to make sure that Radix doesn't only work with Next.js:

• Investigate which components require client only features. For now adding "use client" on top does the job probably isn't too hard. but Perhaps in the future they could be refactored to natively work with React Server Components. However, this would require more effort.
• Test a component with "use client" on Vite React.
• Test a component with "use client" on CRA.
• Test a component with"use client" on Remix.
• Test a component with other Bundlers like Parcel.

[ryendu]

any updates on this?

[callum-gander]

It's a year later now, and no news so far, any news on whether Radix is going to be supporting RSC anytime soon?