-
Notifications
You must be signed in to change notification settings - Fork 660
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
Why does Helmet recreate server rendered tags when it loads? #149
Comments
@henrybaxter Thanks for bringing this to our attention. This is an issue that arises from the nature of As a workaround in the interim, if possible, put all your tags in the root and you'll see that tags coming from the server will not be removed and re-added. |
I've been dealing with an issue with server rendering memory leak with my components being duplicated and not being removed from memory. Would this be related? |
@athomann I don't think that issue is related. Helmet does not duplicate components, it takes strings of data and converts them to HTML metadata. |
@doctyper It appears my issue has to do with react-side-effect and not calling .rewind https://github.com/gaearon/react-document-title#server-usage |
+1 I use both server side react-helmet(rewind) and client side react-helmet (<Helmet meta={config.meta} link={config.link} />) and what I guess is that client side react-helmet reloads links and causes FOUC |
Hello, just wondering if there's been any thought on this issue? Just because it will affect our tracking code |
The workaround until this bug is fixed is to put the server side tags you care about in the root of your app. Unfortunately this does take away the power of nesting at this moment, but those tags in the root will not get blown away on the client side. |
Having the same problem. |
Had the same problem. I just ended up removing |
I have some isssue, script loads twice on ${head.script.toString()} method. Problem has solve with using head script tag with async in on server instead at the end of html. |
Same here, first server renders head.script well. And then it renders the script again when all react js is fully loaded. |
There is a big problem. I spend some hours for research reason why react-router and redux after browserHistory.push() loaded twice with Provider, Router components and why partically I have errors "two valid but unequal nodes with the same Using ${head.script.toString()} in the head tag does not solve this bug, we need possible to prevent loading bundle scripts twicely. |
So, there is a good approach to made environment checks like this: That would be good to have a ability to set params that enables rendering data through server or browser side. It should decide proble. |
My idea to fix this would be to have the first client-side render wait until all instances are mounted before it does it's client state change. To do that I'd need to hydrate the client with the number of instances to wait for. Any ideas on where and how the client should be hydrated? I'm considering putting a data attribute on one/all the Helmet tags or just the html tag. Something like Of course, we could just skip the first client side render, that may be too loose as there may be a mismatch between server and client. At least allowing for one client change after the SSR, we can fairly compare, and in a best situation there should be no change. Thanks for the input! |
As of version 5, Helmet no longer re-creates tags if the server-rendered tags match their client-rendered equivalents. Relevant test: https://github.com/nfl/react-helmet/blob/master/test/HelmetDeclarativeTest.js#L3019-L3040 |
After facing the issue for long hours, note that rendering your scripts in the |
@doctyper I'm just getting up to speed with this, but I don't think the test you referenced is a valid test comparing the recommended SRR I'm running <link data-react-helmet="true" rel="stylesheet" type="text/css" href="//0.0.0.0:8001/static/en-US/main.c1030da.css" data-reactid="5"/> note the I tried updating the test in This issue should probably be re-opened, or consolidated into #98 |
@mmcgahan I am also just now seeing this issue with the latest react-helmet.
|
After digging further, |
I moved my Helmet components higher up the tree and they seem to work as expected. In my situation, I have an App component, i18n provider, redux provider, followed by a Layout component. Inside the layout component are divs which contain Helmet components. There is also a routing piece that is used here which upon initial load (rehydrating from server), it seems to have trouble understanding that the elements were already there. |
Also recently upgraded react-helmet to get rid of |
Using a Helmet server-rendered html page, loading a React app using Helmet, it seemed my CSS was being re-loaded, causing flashing. In the server-rendering script: And then the custom function, stripBlockedHelmetTags:
Basically strips out the |
Per the source here https://github.com/nfl/react-helmet/blob/master/src/Helmet.js#L197 I can see that Helmet blows away managed tags and re-adds them. Why does it do this? It leads to problems like this one http://stackoverflow.com/questions/37355346/script-tag-runs-twice-in-universal-react-application-fb-plugin/37555818#37555818 which is a problem that also affects me.
I'd be happy to submit a pull to change this behaviour, but thought perhaps there was a good reason. Thanks!
The text was updated successfully, but these errors were encountered: