Hello, my application needs to be deployed to live server and without this fix i wont be able to push it live
Hey @aeyzazkhan. If you need this feature right now, my recommendation is to do the SSR of Material UI yourself until we release the official package. You can either:
- Fork
@frontity/core
. - Use something like patch-package to change the files.
This is the guide for SSR of Material UI: https://material-ui.com/guides/server-rendering/
The only @frontity/core
file you need to change is: https://github.com/frontity/frontity/blob/dev/packages/core/src/server/index.tsx
Iāve just tested it and it works great. You can see the changes you need to do in my commit:
The useEffect
to delete the CSS on the client can be added in your own theme, it doesnāt need to be in core:
React.useEffect(() => {
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentNode.removeChild(jssStyles);
}
}, []);
Thanks it worked, there are still a few elements that wont load properly could you please have a look http://staging.parlaybros.com/
Is this feature inbuilt yet instead of patching core?
Hey @furrysmile2, not yet but I think itāll be possible once we do some changes required for the @frontity/amp
package: AMP package, which is in āUpcoming developmentā so coming soon
Once weāve done that work Iāll come back here to see if itās already possible or we have to expose more things.
In console now I get this on post click link prop is required and it should be string
, it says to come here but no issue doc
Can I move modified core to packages directory? or Does this mean we canāt use material-ui with Frontity on the Vercel?
'document' is not defined. It shows this error on client
Urgent: frontity.style is no longer in index.ts because of your updates, so where to add this:
frontity.style =
<style amp-custom>${emotion.css}</style> <style id="jss-server-side">${materialCss}</style>
;
@furrysmile2 I would just copy the file again (https://github.com/frontity/frontity/blob/dev/packages/core/src/server/index.tsx) and then add the style to the frontity
object because it gets sent to the template.
As you can see, the frontity.style
prop still exists in the template file: https://github.com/frontity/frontity/blob/dev/packages/core/src/server/templates/html.ts#L16
I might be a bit late into this but Iām working on implementing Material UI.
I believe emotion.css also moved from index.tsx so curious if thatās covered somewhere else and we can just put: ${materialCss}?
yes we can
Thanks. I got it actually working now and itās working smoothly. Also added serverGenerateClassName
to clean things up a bit.
this issue with correctly rendering material-ui in theme is solved with package ?
Just following up on this as there has been changes with the recent patch from core
ā@frontity/coreā: ā^1.11.0ā,
Is there an OOTB solution for Material UI SSR support now?
By any chance, you can provide a guide on how to do this since https://github.com/frontity/frontity/blob/dev/packages/core/src/server/index.tsx has changed?
@cristianbote has made a CodeSanbox explaining how to do this in this other thread: Integrate Material-UI server side rendered - #6 by cristianbote
Letās continue the discussion there instead