menu

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team

react-helmet-async: A fork of react-helmet that works with streaming…

February 5, 2018 at 4:04pm

react-helmet-async: A fork of react-helmet that works with streaming server-side rendering

February 5, 2018 at 4:04pm (Edited 2 years ago)
We recently implemented streaming SSR for Spectrum (watch out for an upcoming article about that journey!) and this module by was an absolute godsend: https://github.com/staylor/react-helmet-async
The big issue with react-helmet (which we used) is that it's not concurrency-safe because it uses a global object to store the current meta tag state. When using streaming server-side rendering multiple requests can (and will!) be rendered at the same time, which means you might send meta tags that belong to a different request or merge them together! 😱
react-helmet-async works around that by implementing the Redux-like <Provider> pattern to create a new state object for every request on the server:
<HelmetProvider context={helmetContext}>
<Frontend />
</HelmetProvider>
Other than that it's 100% a drop-in replacement for react-helmet, which meant the transition to react-helmet-async could not have been easier. Highly recommended if you're looking to implement streaming SSR! 💯

February 5, 2018 at 4:15pm
we really need some sort of react provider entity that all of these API's can hook into instead of the standard
like-fill
1
  • reply
  • like
Completely agree Ovidiu
  • reply
  • like
Would make things a ton easier for us in Next.js!
like-fill
1
  • reply
  • like
<HelmetProvider>
<ThemeProvider>
<ApolloProvider>
// ++++ other providers
.....
  • reply
  • like
I wonder if one could build an abstraction with the new context API
  • reply
  • like
<Provider helmet={helmetContext} theme={themeContext} apollo={client}></Provider>
like-fill
1
  • reply
  • like
other than that .. NICE
  • reply
  • like
I was thinking that right now, was reading the patch notes for React 16.3 + this .. it just makes sense
like-fill
1
  • reply
  • like
in a lot of cases it's a matter of the library providing the context/state entity, unless they do some extra stuff in the Provider, not sure about Apollo, in redux you already got the store, you just need something that can expose it on the tree - eg: new context API
like-fill
1
  • reply
  • like

February 13, 2019 at 7:40am
: Can you please provide an example to do streaming SSR app where you are using this fork version. I hope you are using Suspense
  • reply
  • like