[docs] Improve the Server Rendering section #6070
Conversation
| On the client side, the default value is `navigator.userAgent`. | ||
| But on the server side, the `navigator` is `undefined`. You need to provide it to Material-UI. | ||
| Material-UI was designed from the ground-up with the constraint of rendering on the Server. | ||
| But it's up to users to makes sure it's correctly integrated. |
| But it's up to users to makes sure it's correctly integrated. | ||
| We must provide to the page the needed style. | ||
| It's important because you don't want the interface to flicker. | ||
| Otherwise, the page will render with just the HTML, then wait for the CSS to be injected. |
There was a problem hiding this comment.
Replace 11 - 13 with:
"It's important that we provide the page with the required CSS, otherwise the page will render with just the HTML then wait for the CSS to be injected by the client, causing it to flicker."
| - create a fresh, new `styleManager` and `theme` instance on every request; | ||
| - render the React tree with the server-side API and the instance; | ||
| - pull the CSS out of the `styleManager`; | ||
| - and then pass the CSS along to the client. |
There was a problem hiding this comment.
Up to you, but I would make this a numbered list, and begin each item with a capital, and end with each a full-stop. The content itself is good.
| For instance, you can provide it like this: | ||
| ## Setting Up | ||
|
|
||
| In the follow recipe, we are going to look at how to set up server-side rendering. |
mbrookes
added
PR: needs revision
oliviertassinari
dismissed
mbrookes’s stale review
Thanks for the review! I have fixed everything. Let's merge.
oliviertassinari
removed
PR: Needs Review
PR: needs revision
|
@oliviertassinari @mbrookes This documentation was lost along the way -- is this still the correct way to do server rendering in @next? |
|
You can also find this integration with next.js https://github.com/zeit/next.js/tree/v3-beta/examples/with-material-ui-next |
|
Following the link in this repo, I was able to get material-ui to render with animations! Thank you :D Now I can see I need to create a color spread for my custom accent color ;) Nice job on the docs, helped a lot! |
It's highly inspired by http://redux.js.org/docs/recipes/ServerRendering.html.
Closes #6065. cc @kybarg