[Style] Address server sider rendering issues #3009

oliviertassinari · 2016-01-21T20:06:18Z

This PR introduce many changes.

This prevent to be flooded by the warnings when using Material UI fo SSR.

Warning: Material UI: userAgent should be supplied in the muiTheme context
        for server-side rendering.
Warning: Material UI: userAgent should be supplied in the muiTheme context
        for server-side rendering.
Warning: Material UI: userAgent should be supplied in the muiTheme context
        for server-side rendering.
Warning: Material UI: userAgent should be supplied in the muiTheme context
        for server-side rendering.
Warning: Material UI: userAgent should be supplied in the muiTheme context
        for server-side rendering.

The prefixer transform is moved to the context.
We can now provide a userAgent variable to the muiTheme. We can use the following values:
- a regular user agent like Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.82 Safari/537.36
- 'all' to prefix for all user agents
- false to disable the prefixer
Deprecate the usage of autoPrefixer.all()
Deprecate the usage of autoPrefixer.getPrefixer()
Deprecate the usage of autoPrefixer.getPrefix()

Fix #2530, #2336 and #2316.

alitaheri · 2016-01-21T20:44:16Z

Any change we can make this contextual? maybe with theme? I mean globals hurt SSR. so a contextual userAgent can be passed down from the root with each request. the theme object is already on it. so maybe add it to the them?

oliviertassinari · 2016-01-21T20:46:56Z

Any change we can make this contextual? maybe with theme? I mean globals hurt SSR. so a contextual userAgent can be passed down from the root with each request. the theme object is already on it. so maybe add it to the them?

Yeah, I agree! This PR is WIP, this first commit can be merged like this, but I'm gonne push new commits to address this.

alitaheri · 2016-01-21T20:52:53Z

I see. Thanks a lot. This will surely close a huge number of issues 😁 😁

newoga · 2016-01-22T03:17:56Z

src/circular-progress.jsx

@@ -144,13 +144,13 @@ const CircularProgress = React.createClass({
  _rotateWrapper(wrapper) {
    if (this.props.mode !== 'indeterminate') return;

-    AutoPrefix.set(wrapper.style, 'transform', 'rotate(0deg)');


Any reason why we can't call muiTheme.prefix() rather than calling it on the imported auto-prefix from here?

I had some issue when trying to do so. That's definitely something we should address.

oliviertassinari · 2016-01-22T09:11:18Z

I have updated the PR, I'm happy with it.

alitaheri · 2016-01-22T10:09:59Z

It's good for now 👍 👍 We'll address more issues when we decide on transformers 👍

Feel free to merge 😁

oliviertassinari · 2016-01-22T10:57:56Z

Awesome, I'm gonna add a section on the doc for the server side rendering before merging.

oliviertassinari · 2016-01-22T12:10:54Z

Added.

mbrookes · 2016-01-22T12:20:45Z

docs/src/app/components/pages/get-started/serverRendering.md

+- `'all'` to prefix for all user agents
+- `false` to disable the prefixer
+
+We rely on the [muiTheme](/#/customization/themes) context to pread the user agent to all of our component.


'pread' / 'spread'?

alitaheri · 2016-01-22T12:29:13Z

All good 👍 👍 Thanks a lot @oliviertassinari

oliviertassinari · 2016-01-22T16:29:43Z

@newoga Do you want to have a final look at this PR before merging?

newoga · 2016-01-22T16:55:26Z

@oliviertassinari Sorry, I looked earlier and I think I was good for now in terms of a first iteration. I'll do one last quick check! 😄

newoga · 2016-01-22T17:04:36Z

@oliviertassinari @alitaheri Yup, let's get this in 👍

I'm not too familiar with server side rendering with React so I can't comment too much in that regard, but I think this is a good first step. We can look at more approaches to refactoring auto-prefix use in separate PRs.

Part of #2986 motivation was developing an approach for removing auto prefixing from the transformation cycle. Since this PR solves it with a similar but different means, maybe we should hold off on #2986?

I can create a new PR (or modify #2986) that doesn't expose the composition and customization of style transformers but still puts our own version of prepareStyles in context if that's still useful. I think some of the changes like ensuring the prepareStyles (not just ensureDirection) gets called only once is still worth it.

oliviertassinari · 2016-01-22T18:31:36Z

@newoga Awesome 🎉.

still puts our own version of prepareStyles in context if that's still useful

This PR is making us one step closer to the goal of #2986.
Right now, on the master branch, prepareStyles is working without the muiTheme.
This PR makes it mandatory.
I definitely think that moving everything into the context will make thing more coherent, easier to reason about and be more customizable.

alitaheri · 2016-01-22T18:43:18Z

I definitely think that moving everything into the context will make thing more coherent, easier to reason about and be more customizable.

Yes I agree 👍 👍

[Style] Address server sider rendering issues

shilpan · 2016-01-26T01:25:55Z

Yay! I have been trying to do server-side rendering and am facing this very same issue. Do you know when this will be released on npm?

newoga · 2016-01-26T01:29:57Z

@shilpan We're getting ready for 0.14.3 release very soon! #3028

oliviertassinari · 2016-01-26T09:55:52Z

By the way. I the only advantage of this PR for my project is to remove the warning.
I wasn't providing a global navigator (that display a warning) in order to prefix for all the user agent on the server side. Then, on the client side, I'm only prefixing for the browser user agent.
This allow me to remove the userAgent parameter from my memoized renderToString function (caching).

thomastvedt · 2016-01-31T23:23:53Z

I just upgraded to 14.3, and the warning "Material UI: userAgent should be supplied in the muiTheme context for server-side rendering." is back. I had this working before using this hack:

    app.use(function(req, res, next) {
      GLOBAL.navigator = {
        userAgent: req.headers['user-agent']
      }
      next();
    });

How am I supposed to set the userAgent to get SSR working again? (now checksums don't match, and I get the warning, once).

I'm using the decorator in main component App.jsx:

import MyRawTheme from 'theme/my-material-ui.config';
@themeDecorator(ThemeManager.getMuiTheme(MyRawTheme))
export default class App extends Component {

"my-material-ui.config.js":

import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';

export default {
  spacing: Spacing,
  // userAgent: req.headers['user-agent'],
  // userAgent: GLOBAL.navigator.userAgent,
  // userAgent: 'all',
  fontFamily: 'Roboto, sans-serif',
  palette: {
    primary1Color: Colors.blueGrey500,
    primary2Color: Colors.blueGrey700   
  }
};

newoga · 2016-02-01T00:53:19Z

@tomasztomys Just want to make sure. I noticed your userAgent key is commented in the my-material-ui.config.js. Can did you try uncommenting your userAgent?

shilpan · 2016-02-01T02:19:37Z

I get weird spacing issues in the mismatch error:

(client) ow:0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 
(server) ow:0 1px 6px rgba(0,0,0,0.12),

This is how I set it up.

const muiTheme = getMuiTheme(null, {
    userAgent: 'all',
});
...
export default themeDecorator(muiTheme)(App);

newoga · 2016-02-01T02:21:39Z

Okay, there's a PR (#3112) that's related to this that I'm going to review soon. I'll see what I find.

thomastvedt · 2016-02-01T09:38:40Z

Changing from

@themeDecorator(ThemeManager.getMuiTheme(MyRawTheme))

to

@themeDecorator(ThemeManager.getMuiTheme(MyRawTheme, { userAgent: 'all'}))

fixed it, thank you :-)
That is, I still get the warning from material-ui, but React don't complain anymore (checksum match).

bravo-kernel · 2016-03-29T18:58:32Z

For future reference in case somebody else is reading all 1000 posts related to this topic, this worked better for me. Defining my custom theme directly and passing the userAgent as second option.

using all instead of false made the UI about 10x slower so using that was not an option
throws a browser-side inline-style-prefixer warning
still need to figure out how to make the (real) calling client agent available in App.js to kill that inlien-style-prefixer warning

import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
import themeDecorator from 'material-ui/lib/styles/theme-decorator';
import MuiThemeProvider from 'material-ui/lib/MuiThemeProvider';
import * as Colors from 'material-ui/lib/styles/colors';

const muiTheme = getMuiTheme({
  palette: {
    primary1Color: Colors.indigo500,
    ...etc...
  },
}, {
    userAgent: 'false'
});

return (
  <MuiThemeProvider muiTheme={muiTheme}>
    <AppBar ...etc... />
  </MuiThemeProvider>
)

export default themeDecorator(muiTheme)(MyComponent);

oliviertassinari added the PR: Needs Review label Jan 21, 2016

[Style] Only display the warning once

c0f98ee

[Style] Move the prefix tool to the muiTheme context

805ee6f

oliviertassinari changed the title ~~[Style] Only display the warning once~~ [Style] Start to address server sider rendering issues Jan 21, 2016

newoga reviewed Jan 22, 2016
View reviewed changes

[Style] Remove the usage of autoprefix.all()

800a365

[Style] Add option for user agent false and all

a6c0985

oliviertassinari changed the title ~~[Style] Start to address server sider rendering issues~~ [Style] Address server sider rendering issues Jan 22, 2016

mbrookes reviewed Jan 22, 2016
View reviewed changes

[Docs] Add a Server Rendering section

a10b76b

oliviertassinari added a commit that referenced this pull request Jan 22, 2016

Merge pull request #3009 from oliviertassinari/server-side-rendering

f1d4b97

[Style] Address server sider rendering issues

oliviertassinari merged commit f1d4b97 into mui:master Jan 22, 2016

oliviertassinari deleted the server-side-rendering branch January 22, 2016 19:36

prashaantt mentioned this pull request Feb 1, 2016

[FlatButton] containerElement broken in Chrome for userAgent: 'all' #3129

Closed

alitaheri removed the PR: Needs Review label Feb 15, 2016

arunoda mentioned this pull request Jan 25, 2017

Context does not apply through <Main /> vercel/next.js#873

Closed

zannager added the package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5. label Mar 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Style] Address server sider rendering issues #3009

[Style] Address server sider rendering issues #3009

oliviertassinari commented Jan 21, 2016

alitaheri commented Jan 21, 2016

oliviertassinari commented Jan 21, 2016

alitaheri commented Jan 21, 2016

newoga Jan 22, 2016

oliviertassinari Jan 22, 2016

oliviertassinari commented Jan 22, 2016

alitaheri commented Jan 22, 2016

oliviertassinari commented Jan 22, 2016

oliviertassinari commented Jan 22, 2016

mbrookes Jan 22, 2016

oliviertassinari Jan 22, 2016

alitaheri commented Jan 22, 2016

oliviertassinari commented Jan 22, 2016

newoga commented Jan 22, 2016

newoga commented Jan 22, 2016

oliviertassinari commented Jan 22, 2016

alitaheri commented Jan 22, 2016

shilpan commented Jan 26, 2016

newoga commented Jan 26, 2016

oliviertassinari commented Jan 26, 2016

thomastvedt commented Jan 31, 2016

newoga commented Feb 1, 2016

shilpan commented Feb 1, 2016

newoga commented Feb 1, 2016

thomastvedt commented Feb 1, 2016

bravo-kernel commented Mar 29, 2016

[Style] Address server sider rendering issues #3009

[Style] Address server sider rendering issues #3009

Conversation

oliviertassinari commented Jan 21, 2016

alitaheri commented Jan 21, 2016

oliviertassinari commented Jan 21, 2016

alitaheri commented Jan 21, 2016

newoga Jan 22, 2016

Choose a reason for hiding this comment

oliviertassinari Jan 22, 2016

Choose a reason for hiding this comment

oliviertassinari commented Jan 22, 2016

alitaheri commented Jan 22, 2016

oliviertassinari commented Jan 22, 2016

oliviertassinari commented Jan 22, 2016

mbrookes Jan 22, 2016

Choose a reason for hiding this comment

oliviertassinari Jan 22, 2016

Choose a reason for hiding this comment

alitaheri commented Jan 22, 2016

oliviertassinari commented Jan 22, 2016

newoga commented Jan 22, 2016

newoga commented Jan 22, 2016

oliviertassinari commented Jan 22, 2016

alitaheri commented Jan 22, 2016

shilpan commented Jan 26, 2016

newoga commented Jan 26, 2016

oliviertassinari commented Jan 26, 2016

thomastvedt commented Jan 31, 2016

newoga commented Feb 1, 2016

shilpan commented Feb 1, 2016

newoga commented Feb 1, 2016

thomastvedt commented Feb 1, 2016

bravo-kernel commented Mar 29, 2016