flexdinesh
Hard Refresh in Browser Produces Warning and Incorrect CSS
We are attempting to use react-socks with Next.js. However, when a hard refresh is executed in the browser we get the wrong CSS applied to the markup as there seems to be a className mismatch. This issue is similar to the issue produced by Next.js when used with 'styled-components' if babel is not configured correctly. However, we are using an external sass file for the styling and not styled-components. Below is the warning from browser console when wrong className (add CSS) is applied. In this case, the client is using a mobile user-agent but the response from the server is for a desktop request. Initial requests work as expected, this issue only happens on refresh.
index.js:1 Warning: Prop className did not match. Server: "Example-style__desktopUA___3ICHb" Client: "Example-style__mobileUA___2vKnj"
PDF of sample code.
This happens because of the default fallback. The code checks for browser agent. If the browser agent is not there (which is the case during server render) the lib falls back to desktop as the default. The correct view will be rendered in the browser once the app is hydrated but the lag between initial paint and hydration will still have the default desktop fallback.
The solution for this is simple — make the default configurable (desktop/mobile/none).
However the problem will still persist as it will either be desktop or mobile unless the server knows and controls the render by setting the right default using the browser agent string in the request.
I understand that adjusting the default may rectify the 'flicker' effect when a page is re-rendered due detecting the browser's user-agent; however, in this case the view is set to the default (in this case desktop) and never re-renders correctly. In our testing using chrome tools, if we refresh while having the user-agent set to any of the mobile devices, the breakpoint defaults to desktop but does not correct itself. It remains desktop which is unexpected. All that said we think this is a great library and would love to get it to work for us. Thanks for your work on this.
I have created a screen cast which illustrates what we see in our testing where refreshing a mobile user-agent defaults to the desktop className/CSS but never corrects itself to the mobile className/CSS as set in the mobile breakpoint. The code utilized in this cast is the same as what was provided in the pdf. The CSS for the desktop breakpoint is blue. The CSS for the tablet break point is red, and mobile is orange. If we are doing something incorrect in our implementation of this package, please let us know. Thanks.
Link: https://drive.google.com/file/d/1LlYvIiKUr-3Hktgj6AHNtORQWYsI4hok/view
@thedern I get it now. Thanks for attaching the video to demonstrate the issue. Looks like the styles are not hydrating properly. This might be an issue with the style library itself and not react-socks but I will double check this in a Next.js project to see what's happening there.
Can you add more details about your project setup? As far as I can tell you are using Next.js with css-modules. Or is it styled-components? Pl add in as much details as possible and I'll try to recreate the issue to debug it. Better if you could create a repo and share it here. Thanks much.
there is the code repo you requested: https://github.com/thedern/next-react-socks-example We are using CSS modules and not styled components for this project. I greatly appreciate you looking into this for us.
Any progress on this? we are using styled components and have started using gatsby and we have the same issue where the mobile breakpoints are not triggered.
Got same error, looks like we need to tell to hydrate that you need to rerender breakpoints.
One thing you can do is to hide some elements till it is loaded on client side using some isServer var. But you if you actually want them to be displayed before hydrate, it is not an option (for examle for SEO).
