Add React Server Component support for Layout components (Grid, Stack, Container)

[oliviertassinari]

Summary 💡

Right now, Material UI, Joy UI, and all MUI's projects need to have 'use client'; in their header. None can't work as server-side components.

Wouldn't it be great if developers could use the layout components without sending a single line of JavaScript to the client? For example, a <Stack> should be able to be a React Server Component.

To make it work with Material UI, Joy UI, and MUI System, we might need to fix #34826.

Out of scope

For other components, like the <Button>, it's unclear what would be best. There are cases where a CSS-only version could be good enough, but without "use client", developers will have to decide each time if they want it interactive client-side or not.
For example mui/mui-x#12180

Base UI doesn't have any styles and is focused on the logic, so RSC for it doesn't make sense.

Examples 🌈

https://twitter.com/olivtassinari/status/1601579688979464192

Motivation 🔦

Improve performance for landing pages.

[TheRealCuran]

In case it helps lending some weight to my 👍, here's our order ID 💳: 61706

This feature, especially in conjunction with #34826 would be most welcome for an upcoming project.

[mj12albert]

doesn't using "use client" on everything including typography and links defeat the point a little

@bchilcott You may be mixing up Server Components with Server-side rendering? A Typography component with "use client" is still rendered to HTML on the server.

The introduction of RSCs does not change anything about SSR – see this (illustrated!) explanation by Dan Abramov for a short but clear explanation: reactwg/server-components#4

[bchilcott]

@bchilcott You may be mixing up Server Components with Server-side rendering? A Typography component with "use client" is still rendered to HTML on the server.

Server components aren’t hydrated in the normal sense (or at all? correct me if I’m wrong?), and they don’t require the additional JavaScript which goes along with that. Why would Typography need to? By using “use client” you’re specifying that a component needs to be interactive in some way.

[mj12albert]

Why would Typography need to?

Ultimately it's because of Emotion, all the Material UI components are styled with Emotion's styled() which uses React Context, and does not work in a Server Component, like a basic page.js in the Next.js app directory.

Hence the effort to move to a zero-runtime styling solution! #34826

[bchilcott]

Hence the effort to move to a zero-runtime styling solution! #34826

Agreed - my point was only that using "use client" everywhere defeats a lot of the point of using RSCs, and so while that directive being included in all MUI components is useful for now, it isn't a solution to this issue:

Wouldn't it be great if developers could use the components without sending a single line of JavaScript to the client?

#34826 is certainly promising though.

[DiegoAndai]

From the February 26th styled meeting: this is a "nice to have" for Material UI v6.0.0.

Meaning if we have the time, it will happen in v6.0.0, if not later on. Our main assumptions:

• Having the zero CSS runtime would have a much bigger performance impact than RSC. Not shipping the JavaScript source to the client bundle has for a handful of Layout components (Stack, Container, Grid) only marginally improve performance.

I expected to get better initial load performance since that was so highly marketed. But in reality, I can’t tell a difference between this and client side data loading.

https://www.flightcontrol.dev/blog/nextjs-app-router-migration-the-good-bad-and-ugly

from 60 to 100 lighthouse score just with Zero runtime, not RSC

https://twitter.com/olivtassinari/status/1755964491399848422

• These components are already usable in RSC thanks to the "use client" signal.
• We can implement this in a minor version during Material UI v6 lifecycle.
• Emotion might support RSC soon, which would greatly simply our implementation with the zero runtime (no need to toggle "use client" in the source).