Add use client directive to all components in a new build step

[oliviertassinari]

Summary 💡

Same as mui/material-ui#37503

Examples 🌈

No response

Motivation 🔦

To feel the pain:

1. Create a new project with the example linked on https://mui.com/material-ui/guides/next-js-app-router/
2. Copy and paste this example https://mui.com/x/react-charts/lines/#data-format
3. ❌ Crash

4. ✅ Add "use client" in your file

Saving step 4. would be great.

Context

This is part of improving the integration with Next.js App Router. I have also noticed bugs with it, but these are beyond our control:

• app dir: useId mismatch on first request in next dev vercel/next.js#48284
• Invalid DOM property on SVG transform-origin vercel/next.js#53342

[jsleemaster]

I'm having the same problem 😭

[xeofd]

Bump, was just about to raise this 👍

[oliviertassinari]

The components in the lab are getting covered mui/material-ui#40358.

Does someone has a practical use case for this issue? I guess with rich components like MUI X has its rare for the component that renders it to not already have "use client"? So maybe the value is on the ease of getting started?

[oliviertassinari]

Oh actually, I just hit the case playing with the component, with the code copied from the docs:

Not a major annoyance.

[LukasTy]

Clarifying that MUI Core uses https://github.com/mui/material-ui/blob/master/packages/rsc-builder/buildRsc.ts to automate it.

[oliviertassinari]

Which is a script that I think we can make much better:

• make the source of the script handle configurable
• ignore files that don't have React client-side APIs
• allow, with JavaScript comments, to support exceptions to the logic

[cherniavskii]

It seems like for the Data Grid packages, we can add 'use client'; to the index files since everything is imported from there: https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/index.ts

[oliviertassinari]

The closer to the use of client APIs, the better though. If people want to use some of the API on the server, a use client in all the index would prevent them to.

Maybe one in https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx would cover 80% of the problem.

[cherniavskii]

@oliviertassinari Overall, I agree.
However, I can't find a single component exported from the data grid packages that could be used as server components - all of them use hooks.

[oliviertassinari]

However, I can't find a single component exported from the data grid packages that could be used as server components - all of them use hooks.

@cherniavskii I wonder about the work we are doing to better support server-side integration though. We experienced cases like this in the core: mui/material-ui#42750.

[MBilalShafi]

Interesting point, though as of now I can not foresee any server-rendered component for the server-side integration as the initial goal is data fetching on the client, I'm not sure if that'll be the case later on too. Let's start with adding "use client" in DataGrid.tsx

[oliviertassinari]

Oh, now I might understand why nobody asked for using a data grid from a server component, but asked for the charts.

It might be because of https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#passing-props-from-server-to-client-components-serialization, the columns definitions of the data grid, and as many other props aren't serializable, so people need to add "use client" where they render them <DataGrid>.

So the benefits of adding "use client" on MUI X Data Grid is very limited.

For example, I don't understand why they do this https://www.telerik.com/kendo-react-ui/components/server-components/, for charts yes mui/material-ui#12180, but for a data grid I don't see the point.

[carl0s-sa]

Hey! Are there any plans of adding "use client" for LocalizationProvider and other components so we can use this in next 14? I'm using mui/x-date-pickers-pro and it's not letting me place the provider in the layout without exporting it from an "in-between" client file.