Styled components

[PEM--]

Styled components allows specific behavior depending on its rendering origin:

• On the server styles can be injected in the payload and the remaining CSS styles can be created a regular CSS file.
• On the client, styles can be directly used within the React's components.

Using styled-components, we can avoid the FOUC (Flash Of Unknown Css) that plagues SPA and delay styles loading so that the HTML payload renders even faster its TTFB (Time To First Byte) with the real and appropriate styled tags.

[Morganjackson]

Do you think this could be part of version 3.0?

I got this working with styled-components v2.0.0-7 by installing ssrwpo locally and addingcss = styleSheet.getCSS() but it would be nice to have this out of the box as its a showstopper for anyone using styled-components.

See https://github.com/diegohaz/arc/blob/fullstack/src/server.js#L77 for an example of SSR working with styled-components 1.4.4.

[PEM--]

Indeed, this out to be in our 3.0!

[PEM--]

Hey! @Morganjackson are you interested to do this? For this project, I don't want it to be a "one man knows it all". It's out to be a community based effort.

[Morganjackson]

@PEM-- I'm happy to contribute anyway I can, however I'm sure there is a better way to handle this than what I have hacked together.

import { styleSheet } from 'styled-components';

  if (!stepResults.hasUnwantedQueryParameters) {
    bodyMarkup = renderToString(app);
    css = styleSheet.getCSS()
    helmetHead = rewind();
  }

  if (stepResults.body === null) {
    stepResults.head = `<style type="text/css">${css}</style>`
    stepResults.body = `<div id="react">${bodyMarkup}</div>${stepResults.contextMarkup}`;
  }

This works but I think it should be in if (stepResults.head === null) but I'm not sure how.

[PEM--]

@Morganjackson I've just invited you on our Slack account. It would be easier to start this new journey. @mxstbr's work is assuredly part of it 😉

[cbilotta]

This is done.

Now we just need to keep up with the styled-components potential API changes.