Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Streaming SSR #322

Open
mxstbr opened this issue Sep 30, 2017 · 7 comments
Open

Streaming SSR #322

mxstbr opened this issue Sep 30, 2017 · 7 comments

Comments

@mxstbr
Copy link

mxstbr commented Sep 30, 2017

React 16 introduced streaming server-side rendering, allowing Node servers to improve the TTFB and respond better to backpressure. Unfortunately, how react-helmet works at the moment it doesn't lend itself to streaming at all since the document.head is already at the client by the time helmet knows what meta tags to inject.

I wanted to kick off a discussion about how dynamic meta tags could work in this new streaming world. Has anybody given this any thought?

@gabemeola
Copy link

gabemeola commented Oct 2, 2017

With React 15.x using React-Helmet, since I stream the document head for prefetching before performing any SSR work, my work around was to cache the meta tags / title results from react-helmet after render.
First load gets default head tags but subsequent loads use cache.

Is there a way to rewrite head later in the document?

@mxstbr
Copy link
Author

mxstbr commented Oct 2, 2017

Is there a way to rewrite head later in the document?

Nopesies, the browser already has that part so you can't change it anymore. That's what this issue is about... 😉

@gabemeola
Copy link

Looks like PR #296 addresses part of the issue with streaming a response.

@goatslacker
Copy link

Dupe of #216

@adam-26
Copy link

adam-26 commented Dec 14, 2017

I have released react-router-metadata, internally it uses a modified version of react-helmet. I realize that this can only be used with react router config v4, so it's definitely not an alternative unless you're using react-router-config.

To support streaming, instead of defining metadata in the render() method, it requires route components define static getMetadata(routeProps, props) methods to define metadata.

However, it uses react-html-metadata to provide the metadata context, it probably wouldn't be too difficult to create implementations for other routers/approaches as required.

Hope this helps someone

@gabemeola
Copy link

Looks like in HTML5 it is fine to omit the and .

In theory would it be possible to have something resemble.

`
<!doctype html>
${ReactDOM.renderToNodeStream(...App)}
${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
`

@mxstbr
Copy link
Author

mxstbr commented Feb 16, 2018

I'm using https://github.com/NYTimes/react-helmet-async very happily!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants