Styled-components: SSR + Page Caching Considerations

[redroot]

Firstly, awesome project - we’re really keen to use this on something in the next couple of weeks.

My two questions are on SSR rendering.

1) We might have to look into page caching for this project, with a CDN-based global stylesheet the CSS doesn’t need to be factored in, but is there anything to be aware of SSR-wise with styled components? Does the SSR create style tags for all possible components in the project or just the ones used on that particular page as it gets rendered? In both causes the pages shouldn’t break if we are caching the whole page actually, but is there anything else to note?

2) performance of server side rending - are there any relative numbers on this? For example, having 100 unique components with 5 styles each, how long that take to inline vs say 100 with 10 styles or 200 with 5 styles. If the SSR stylesheet brings in all styles that means each uncached page load would have to render the whole stylesheet to inline it right?

If this has been asked elsewhere or misunderstood something, apologies, just point me at the right issue.

[kitten]

I’d suggest you to take a look at the styled-components-website which is cached on the SSR level and on Cloudflare as well.

Only critical components’ CSS ends up in the style tags on the SSR’ed page so caching the result is fine as long as its consistent.

We don’t have any performance benchmarks right now, but we’d be happy if someone would investigate that :)

[redroot]

@philpl thanks for getting back to be, thats good to hear and I'll check out that repo. If I get a chance I might have a stab at the benchmarking!

[redroot]

@philpl I managed to write some quick SSR benchmarking tonight, you can see the results and the script I used here: https://gist.github.com/redroot/81dc3be0114b094cd4e387fd89421ec3

I ran it a few times and the conclusion I came to is its all pretty quick and O(N) time wise where N is the number of components, even with props-based stuff! So out of the box performance seems great. I also really like the warning when you've generated more than 200 classes - great stuff!

Disclaimer: this is the first time I've written any Node/Javascript benchmarking code so any feedback welcome, happy to adapt it into something more useful for the repo's needs.