-
Notifications
You must be signed in to change notification settings - Fork 8
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
cleanup option of createHead causes double asset loading #2
Comments
Hey @jozefmery thanks for reaching out about this. I've heard about the flashing problem with css a multiple times now and am not sure if there is a solution that can be utilized in this lib. Flash of unstyled contentWhat I noticed in my apps that I have only one singe global css file that is used for all pages (meaning I don't use the "this route bings it's own css" feature of remix). So I moved the Do you experience other noticeable effects caused by this? Why the cleanup?If we don't do the cleanup, the server-rendered elements will stay in the head which may cause unwanted behavior. For example the user may load a subpage that brings extra styles then navigates away from that page and normally remix would remove the extra styles but now it doesn't. By setting Rendering Head on server
Good observation and I understand your thinking. The Head component will "magically" opt out from rendering on the server and only render on the server within Possible solutionI'm wondering if it might solve the problem when the cleanup step is delayed a little bit. Maybe we need to wait until all resources are loaded before removing them from the head. Do you think it might be worth investigating here? Do you have another idea? I really hope that this package will not be needed in the near future because either react solved its hydration issues or remix has a buildin workaround. |
I tinkered around a little bit with the flash of unstyled content problem and noticed that on my end the problem occurs only with a disabled cache. Do you have your cache enabled or disabled? |
Firstly, thank you for the detailed explanations. Rendering style links on the serverI'm using UnoCSS in my project (in case you don't know, think Tailwind on steroids, highly recommended) meaning I also have one main css file, the other is just resets, so statically rendering them seems like a smart idea, but I haven't tried that approach yet (will try and comeback if I find any problems). Unfortunately, this solution may not be feasible for everyone. CacheI normally have cache enabled, sometimes I disable it for testing purposes. Final thoughtsI am by no means expert, and for now my page is a sort-of toy project, so my ideas may be completely useless. Despite that, I'm not sure either React or Remix will have a meaningful solution for this problem any time soon. React docs state that hydration mismatches, although only warning in development mode, should be treated as bugs and fixed, because validating the markup would be very expensive in most cases. |
Cool! Agree that the "moving css out of remix" is not a solution for everyone. But as I mentioned, this package also does not aim to provide a sustainable solution and become part of some sort of "standard". It helps me move forward with react+remix until they sort their stuff out and if it helps others along the way I'm more then happy. Interesting that you still have flickers with cache enabled. I can imagine that it might be the time the browser takes to re-apply the styles to the page. Might be worth investigating if the problem becomes reproducible with massively big stylesheets. Another thing could be blocking As with the double Agree with that a fixed delay will not work reliably. I think it would work if we'd wait with the cleanup until the hydrated head is rendered and loaded but to me that feels like a too complex workaround for a problem that will hopefully be fixed at it's root in the near future. |
Yes, hopefully a native solution is provided by the Remix, or even better, React itself. This solution, and I mean absolutely no disrespect, does feel rather "hacky". My stylesheet does not have Anyway, you might want to close this issue as |
I also consider this "hacky" ;)
yeah, might be related to that - not sure either.
Will do and thank you, too |
Issue description
Following the configuration steps in the provided readme causes the
Head
component to be rendered twice, also causing double loading of assets, and flashing (as the css is unloaded, and then immediately loaded again). First,Head
is rendered into a string on the server, and again on the client upon hydration. Providing{ cleanup: false }
(true
by default) to thecreateHead
function fixes the double-rendering.Notes
Originally I thought the
readme
is incorrectly rendering theHead
both on the server and in theApp
component. Removing it from theApp
component fixes the issues, however theHead
component is no longer managed by React, and is thus static.Rendering in the App component combined with disabled cleanup also seems to work while keeping the
Head
reactive.Furthermore, I was unable to figure out the point of having or enabling the cleanup option from source.
The text was updated successfully, but these errors were encountered: