Server Side Rendering

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?

[diegohaz]

Now this repo is working with styled-components, injectGlobal, SSR and everything: https://github.com/diegohaz/arc/tree/fullstack

@thisguychris

[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. 👍