Skip to content

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

@oliviertassinari

Description

@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.

Metadata

Metadata

Labels

nextjsscope: systemThe system, the design tokens / styling foundations used across components. eg. @mui/system with MUItype: new featureExpand the scope of the product to solve a new problem.v6.x

Projects

Status

Done

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions