Server Side Rendering

[geelen]

Thought I'd open an issue to kick off the discussion. It's already possible because of the way we build on top of Glamor, but we haven't exposed it as an API. But basically, if you did this:

import styleSheet from 'styled-components/lib/models/StyleSheet'

/* before each render */
styleSheet.flush()

/* after each render */
styleSheet.rules().map(rule => rule.cssText).join('\n')

Then you should get the chunk of CSS you need for each request. Can someone with a server-rendered setup take a look and confirm this works, and maybe show how they'd be invoking it? I'd be happy enough to export something like:

import { serverStylesheet } from 'styled-components'

/* before each render */
serverStylesheet.reset()

/* after each render */
serverStylesheet.getCSS()

What do people think?

[pheuter]

I'll gladly help test this out! We currently avoid using styled components for most styles because of the unclear path to support SSR, would be great to move the inline styles into styled components if we can generate the CSS on the server.

Here is what I have setup so far:

import styleSheet from 'styled-components/lib/models/StyleSheet';

styleSheet.flush();

let markup = renderToString(
  <Root store={store} Router={ServerRouter} routerProps={{ location, context }} />
);

console.log(styleSheet.rules());

Unfortunately, I'm getting back an empty array []. I can confirm that one of the components nested inside Root is wrapped by styled and generates a className when the client loads.

[diegohaz]

I'm currently implementing SSR on a project and I managed to make this work without styleSheet.flush() (if I call this, the result is the same as @pheuter), only the styles from injectGlobal weren't included.

Once I finish it I will post the complete code and a demo here. (I'm trying to make the app work completely without javascript enabled on client).

[mxstbr]

only the styles from injectGlobal weren't included.

Huh, that's interesting. I think I might accidentally use another styleSheet for that? /cc @geelen

[diegohaz]

Demo: https://arc.diegohaz.com (disable javascript, even the form works).
Code: https://github.com/diegohaz/arc/blob/universal-redux/src/server.js#L74

It doesn't work with injectGlobal (I removed).

The serverStylesheet.getCSS() API would be nice. 👍

[lucasavila00]

I noticed something.
I'm using Grid from 'grid-styled' and using styleSheet.rules().map(rule => rule.cssText).join('\n') seems to go just one level deep. It never rendered code of Grid, but rendered my code that used media queries.

code is like this:

const Wrapper = styled(Grid)`
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  z-index: 0;
  top: 90px;
  z-index: 1;
  width: 100%;
  left: 0px;
  @media screen and (min-width: 52em){
    left: 16.66%;
  }
  @media screen and (min-width: 64em){
    left: 25%;
  }
`

Invoked as <Wrapper xs={1} sm={1} md={2/3} lg={1/2}>{children}</Wrapper>

css gets rendered as

.iMsaJZ { 
  position: fixed;
  display: -webkit-box;display:flex;display:-webkit-flex;display:-ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 40px;
  z-index: 0;
  top: 90px;
  z-index: 1;
  width: 100%;
  left: 0px;
 }
@media screen and (min-width: 52em){
  .iMsaJZ { 
    left: 16.66%;
  }
}
@media screen and (min-width: 64em){
  .iMsaJZ { 
    left: 25%;
  }
}

The element receives the correct classname on SSR (class="iMsaJZ hqknNf"), wich are two classes, one for my code(iMsaJZ) and one for Grid's(hqknNf).
But there is no mention to the classname designed to Grid in the initial server response.
When I turn JS on then Grid's code appears to the browser.

.hqknNf { 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  padding-left: 0px;
  padding-right: 0px;
  width: 100%;
  width: 100%;
 }
@media screen and (min-width: 40em) {
  .hqknNf { 
    width: 100%;
  }
}
@media screen and (min-width: 52em) {
  .hqknNf { 
    width: 66.66666666666666%;
  }
}
@media screen and (min-width: 64em) {
  .hqknNf { 
    width: 50%;
  }
}

Inlining code solves the problem and ssr can be used but it breaks composition :(
I hope I made myself clear :)

Also to notice that while profiling on my dev pc (windows 10) I got 0 ~ 1ms latency calling styleSheet.rules().map(rule => rule.cssText).join('\n')
That's nice!

[gbozee]

Based on @pheuter test, I get the same result,(the class is injected in the string markup) but not calling stylesheet.flush() before calling styleSheet.rules() produces TypeError: Cannot read property 'cssRules' of undefined

[aesopwolf]

Ah, this is so great. I was able to get it working with gatsby in no time

  render () {
    const styles = styleSheet.rules().map(rule => rule.cssText).join('\n');

    return (
      <html lang="en">
        <head>
          <style>
            {styles}
          </style>
        </head>
        <body>
          <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
          <script src={prefixLink(`/bundle.js?t=${BUILD_TIME}`)} />
        </body>
      </html>
    )
  }

I'm all for exposing a simpler api via serverStylesheet.getCSS()

[kitten]

@gbozee I ran into that problem. Turns out when (f.e.) webpack 2 is used, it loads the es bundle, due to the package.json js:next/module fields.

Until there is an API for the stylesheet that we can use, you should work around it using webpack's resolve.alias to load the lib folder instead.