If you’ve written React code in any server-rendered framework, you’ve almost certainly gotten a hydration error. These look like:Text content does not match server-rendered HTMLorError: Hydration failed because the initial UI does not match what was rendered on the serverAnd after the first time you see this, you quickly realize you can just dismiss it and move on... kind of odd for an error message that’s so in-your-face (later on, we’ll see that you might not want to dismiss them entirely).So, what is a hydration error? And when should you care about them vs ignore them?In this post, we’re going learn more about them by building a very simple React / Express App that uses server-side rendering.But before we can answer that, we need to know what Server-Side Rendering is in the first place.Server-Side Rendering (SSR) is a technique where the server renders the HTML of a page before sending it to the client.Historically, you’d find SSR applications commonly used along-side template engines like Jinja, Handlebars, or Thymeleaf (for all my Java friends out there) - which made the process of building applications like this simple.We can contrast this with Client-Side Rendering (CSR) where the server sends a minimal HTML file and the majority of the work for rendering the page is done in javascript in the browser.To start, we’ll install Express for our server and React:npm install express react react-dom Then, we’ll make a basic React component with a prop:import React from 'react'; interface AppProps { message: string; } function App({ message }: AppProps) { return <div><h1>{message}</h1></div> } export default App; Finally, we make an Express server that renders this component:import express from 'express'; import React from 'react'; import { renderToString } from 'react-dom/server'; import App from './components/App'; const app = express(); const htmlTemplate = (reactHtml: string) => ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React SSR Exa...
First seen: 2025-04-06 09:13
Last seen: 2025-04-06 15:14