Understanding Hydration Errors by Building a SSR React Project

So even though the client has and wants a different value the correct thing to do according to the React framework is to ensure that the first render perfectly matches the server so that the React state matches the DOM, then immediately re-render with the desired client state. This will be faster (the DOM changes will be minimized rather than completely deleted and recreated) and more correct (preserving DOM state and browser functionality).

In theory React could read the DOM and do a proper diff and make this de-sync less harmful. But this is probably still less efficient then doing a small amount of work to make the first render match (which is basically just building up the virtual DOM to match the real DOM).