[examples] Add Remix example #29952
[examples] Add Remix example #29952
Conversation
There was a problem hiding this comment.
Should we add it in https://mui.com/getting-started/example-projects/#official-examples?
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Yes, I will add it. I focused on making everything work in this first iteration. |
Good catch! I removed it when trying to scaffold everything from start. Added it back |
mnajdova
added
docs
|
is there an example which supports SSR for MUI using REMIX + Express setup? |
| const emotionChunks = extractCriticalToChunks(html); | ||
|
|
||
| // Re-render including the extracted css. | ||
| const markup = renderToString( |
There was a problem hiding this comment.
I have just realized that we render twice. In https://remix.run/docs/en/v1/guides/styling, it says:
It's unlikely this will effect performance in a significant way, React is pretty fast.
I don't buy it, not for one second. React is slow on the server side. At least, it's my personal experience at Onepixel relative to other templating languages, and indexing about 10m pages with Next.js on Google. Most of the time spent to get the first byte was on rendering the React tree (react apollo was half of this time). Looking back then, I can't imagine that it would have flied to render twice.
Could we look into the feasibility to render only once? :)
There was a problem hiding this comment.
Adding it to my Todo list
There was a problem hiding this comment.
@mnajdova I am wondering if this can be extended to render head+body in the first pass and only head in the second: https://gist.github.com/alexkuz/d91c9ce1380f4b528ebf262ad0e4f959
that would be so far the best way of using css-in-js with remix - until it gets better support for build time css-in-js.
There was a problem hiding this comment.
Hey @jurokapsiar :) That's a good idea. I plan to look into this next week when there is not much activity on the repo. I will open a PR with my findings.
There was a problem hiding this comment.
I had some time today, have created #30366
I am basically inserting the style tags after an insertion point meta element that is added by the root.tsx. As far as I could test it works, but I may be missing something. It feels a bit hacky to parse the HTML string, but I don't have a better idea.
|
where can I find this example in documentation? (assuming it is up somewhere already?) |
This PR adds example that uses Remix and TypeScript.
Fixes #29877
Same as https://github.com/mnajdova/remix-with-mui-typescript - the commits there can be reviewed, it was faster for testing in an isolated repository.