React / General

How we do streaming server-side rendering and caching for Spectrum

How we do streaming server-side rendering and caching for Spectrum

React/General · February 7, 2018 at 4:10pm

How we do streaming server-side rendering and caching for Spectrum

React / General · February 7, 2018 at 4:10pm
Just published on the Zeit blog: https://zeit.co/blog/streaming-server-rendering-at-spectrum
Any questions about streaming SSR?

February 7, 2018 at 4:34pm

I was surprised to not see styled-components mentioned.

  • reply
  • like

My experience has been that streaming works well when styles have been extracted as part of the build process.

  • reply
  • like

But for CSS-in-JS you need to get the full response to send the styles first, otherwise there's a FOUC.

  • reply
  • like

There are "hacks" to get streaming working correctly with css-in-js. It requires interpolating style tags with the html being streamed as chunks are generated by react. see https://github.com/threepointone/glamor-stream

  • reply
  • like

That totally makes sense. Applying critical styles as you learn about them. Also, threepointone is a wizard.

  • reply
  • like

What is the advantage of SSR, if as mentioned in the article the data for unauthenticated users doesn't change and for authenticated users it's all client-side anyway?

  • reply
  • like

How are you using react-helmet-async?

  • reply
  • like

@mxstbr Spectrum is sill a combo of CRA and Backpack right?

  • reply
  • like

styled-components does exactly that @tk, we have a sheet.interleaveWithNodeStream API which interleaves style tags with the HTML as it gets along

  • reply
  • like

@jaredpalmer yep, backpack for all our backend servers

  • reply
  • like

@tushkiz yep, using react-helmet-async!

  • reply
  • like

@sedubois SEO, Spectrum needs to be 100% indexed on Google

  • reply
  • like

And no, client-side-only rendering is not enough to get indexed on search engines haha

  • reply
  • like

@mxstbr FYI, the article is missing the images for me

  • reply
  • like

@mxstbr great post! I have tried the interleaveWithNodeStream function. I have got the SSR working however, some of the styles were missing on the part of the UI that was not server-side rendered. I don't know if I am missing a piece or if it's a known problem.

  • reply
  • like

@hakimelek you have to call consolidateStreamedStyles as the very first thing in your app.

  • reply
  • like

Before you even import any

  • reply
  • like

Components

  • reply
  • like

Yes, I am doing that :/

  • reply
  • like

Want to submit a post in the styled-components community with your code @hakimelek? https://spectrum.chat/styled-components I'll see what I can do

  • reply
  • like

February 8, 2018 at 3:34am
  • reply
  • like

hi @mxstbr seems spectrum only does SSR in specific cases? cuz it does not when view-source

  • reply
  • like

been trying to get renderToNodeStream to work and ran into issue with Helmet and styled-components... about to give up then i ran into this thread...

  • reply
  • like

@mxstbr id you use SSR for SEO, why not just doing pre-rendering e.g using Gatsby?

  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```