"Rendering" is one of those words that means three different things depending on who you ask. Before we walk the timeline, it helps to separate the layers:
- The rendering API — the actual function you call (
ReactDOM.render,createRoot,renderToString…) to turn a component tree into DOM or HTML. - The rendering strategy — where and when the HTML is produced: in the browser, on a server per-request, at build time, etc.
- The hydration model — how a server-produced HTML page becomes interactive on the client. The post is organized around layer 2 (strategies), because that's where the chronological and simple-to-complex story is richest — but each strategy is tagged with all three: an At a glance box names its rendering API and hydration model too. There's also a short section near the end that lists the API methods on their own, since "render a component" can literally mean those. Each strategy also has a Metrics table in web-vitals shorthand (TTFB, FCP, LCP, TBT, INP, CLS) — every acronym in this post is spelled out in the Glossary at the end.
One honest caveat up front: chronology and complexity mostly line up, but not perfectly. Islands and streaming SSR landed around the same time, for example. I've ordered primarily by conceptual complexity and noted the rough dates as we go.