Understanding the cause of hydration issues in react-router

00:00 There is this frustrating issue with React router and server-side render frameworks that you've probably run into, and that's hydration issues. And no, I don't mean when you're coding so long that you become thirsty and then you need to grab a glass of water. No, I mean hydration issues where the client-side rendered HTML does not match what was rendered on the server. Well let's talk about it. I've prepared this example to show you what goes on when you render some HTML with server-side rendering and why it causes hydration issues.

00:30 So if you look at the image here, you can imagine that you have your server on the left So this is located somewhere in Asia, for example It has access to the process it can access environment variables over process.environment And it's used to render your server-side rendered HTML and then on the right side you have your browser it has access to the window object you can use it to access something like document.addEventListener and stuff like that and it's not located in Asia but the browser is located for example in Europe and this is unique to every user where your server is unique to the server so wherever the browser makes the request from it is the same server And also this depends on a few other things that's not the topic of the video. If you look at this, you can imagine that you have your server side render HTML on the left. And what happens with this HTML? So the server renders it and prepares it to be sent to the client. So it's sent to the browser and then the browser gets that document request and then it goes through the HTML, finds the script tags and makes additional requests or runs the scripts that it finds.

01:45 And when it runs those scripts, what's important to notice that we have the server-side rendered HTML on the browser so it's received from the server and then what the browser is gonna do it's going to client-side render the HTML and how it does that is if you imagine all your HTML is located in a single JS file, React is going to take that file, it's going to render it on the client without running the effects and then it's going to create your client-side rendered HTML. So the same behavior that happens on the server happens on the client. So React takes the HTML, renders it on the server without running effects, then ReactRouter sends it to the client, the client uses the server side rendered HTML to compare it to the client side rendered HTML, and the client side rendered HTML is generated by React by rendering everything in the browser without running the effects. So why do I say without running in the effects so many times? Well, that's a very important distinction.

02:55 So when it runs without running the effects, what is going to happen is it's going to go into this decision tree so it's gonna take the server-side rendered HTML and the client-side rendered HTML and then it's gonna compare those before the hydration happens so before the effects run and it's gonna say the following does it have a difference so is the client-side rendered html different than the server-side one if yes there is a hydration issue is going to log it to the console and you're probably going to have unexpected behavior or flashes of unstyle content on something like that and if the answer is no it's time to celebrate! You bust out your dancing chops, you dance around and have a great time! But jokes aside the reason this happens is if you look at the server and the browser here they run in different environments and even though the rendering by react is done in the same way the differences that happen is for example your server is in asia And if you're rendering dates in your HTML, it's going to use the Asian time zone to render the date and for example Let's say it's 3 p.m.

04:09 There Well, if your browser is in Europe, it's going to render 6 p.m in Europe and when react renders the client-side HTML and it has the server-side HTML and compares them the dates are different so it means that there's a hydration issue and that's all it boils down to and all of the hydration issues are caused by this and a very simple way of getting around this is making sure you don't render anything on the client that's client only before you run the effects because effects are run only on the client, you can use them to render client only content because after the comparison is done and if you get to this celebration time effects are run and then after that there are no more comparisons and you're fully on the client. So the server side rendered HTML is not important anymore. So that's very important to know if you're wanting to render something only on the client, use use effects or any sort of other effects to make sure that it's rendered only on the client. And that is the rough overview of why hydration errors happen and what the distinction is between client-side rendered HTML and server-side rendered HTML.

05:29 And This is really important to know if you wanna do any sort of server-side rendering with React Router because you will know how you end up in a situation where you have hydration errors and more importantly how to fix them. That's it for today, Thank you for watching and see you in the next one. Bye!