Hydration Failure

This text is generated server-side.

This content is generated client-side. Datestamp: 1688734135811

If you View Source on this page, you'll see both of the text blocks above as generated html.

But there are several things we need to address on this simple page:

1. How/why did the client component generate static html content delivered in the response?
   Because client-components are pre-rendered on the server. This is SSR. There are ways to control this, but by default client components will pre-render on the server at the time of request.
2. Why is the client component datestamp different in the source vs what I see on the screen?
   Because the component rendered on the server, the output was delivered, and then it was re-rendered in the browser and updated. This process is called hydration.
3. Why did React throw an error in the browser console?
   Error: Text content does not match server-rendered HTML.
   Error: Hydration failed because the initial UI does not match what was rendered on the server.
   Remember that RSC generates both static content and a virtual DOM describing the DOM it generated. After the page loads, the actual DOM is compared to what RSC thinks it rendered.
   This error is thrown because the client-side component has already rendered a different datestamp than what the server delivered. This confuses React and the warning is thrown because it doesn't know what happened.
4. Why did everything on the screen flash with red borders?
   Because of the hydration error, React got confused and needed to reconcile the difference between the static content and its virtual DOM. It throws this error:
   There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
   Since the Virtual DOM that was also sent down contains all the static content as well as the client components, React decides to completely re-render the document from the Virtual DOM.
   This is made obvious by the red outlines highlighting every new element that was inserted by React.