Simplify the use of UI frameworks

[telcy]

The current way of using UI frameworks like MUI is not ideal and involves editing multiple files (entry.client.ts, entry.server.ts, root.tsx etc.) to set up everything correctly. This is ok (not ideal) for using MUI globally but makes it difficult to limit the use of MUI to some dashboard routes.

https://github.com/mui/material-ui/blob/master/examples/material-ui-remix-ts/app/entry.client.tsx
https://github.com/mui/material-ui/blob/master/examples/material-ui-remix-ts/app/entry.client.tsx
https://github.com/mui/material-ui/blob/master/examples/material-ui-remix-ts/app/root.tsx

Nextjs offers a hook useServerInsertedHTML that simplifies the use of MUI/ Emotion.
https://github.com/mui/material-ui/blob/ffa4751a513cee56a8cd069c788a209d8beae7c7/examples/material-ui-nextjs-ts/src/components/ThemeRegistry/EmotionCache.tsx#L4

Then we can use ThemeRegistry anywhere in our app.
https://github.com/mui/material-ui/blob/ffa4751a513cee56a8cd069c788a209d8beae7c7/examples/material-ui-nextjs-ts/src/app/layout.tsx#L46C19-L46C19

I think an easier and more straightforward way of implementing UI frameworks might greatly increase adoption.

[cliffordfajardo]

@telcy with this API, would that mean we'd only need to do the setup work in root.tsx? I haven't use this API before since haven't tried it in NextJS

+1 I have found integrating CSS-in-JS experience to be quite a PITA with every SSR framework as well; Its also a reason I haven't upgraded Ant Design v4 to v5 in a few internal Remix apps at work, since V4 was pure css based.

Example

It looks like the primary use case for useServerInsertedHTML is to help folks using CSS-in-JS libraries more easily integrate with SSR experiences, including RSC. Essentially, its a hook ensures CSSinJS styles are loaded server side. Simple example:

benefits of useServerInsertedHTML like remix feature

recaping what @telcy said:

1. Easier for folks to adopt remix
   • new folks who want to use CSS-in-JS and adopt remix have an easier path.
   • ease tech leads & managers on the migration story
2. Facilitate migrations
   • teams using CSS-in-JS in their React apps, can adopt Remix more easily
   • could help folks using CSS-in-JS migrate off it to more plain css solutions (ex:tailwind, pure css, css modules etc)

Curious to hear what @markdalgleish from Remix team thinks about this 💿

References

• NextJS source code for userServerInsertedHTML (< 25 line of pure React code)
• Tanner Linsley tweet thread about useServerInsertedHTML
• Nextjs docs for useServerInsertedHTML
• Ant design docs for using `userServerInsertedHTML
• MUI docs for using userServerInsertedHTML