Server

Browser
Server Rendering Static SSR SSR with Rehydratthion CSR with Prerendering Client Side Rendering
Overview: An application where input is navigation requests and output is HTML in response to them. Built as a Single Page App, but all pages prerendered to static HTML as a build step, and the JavaScript is removed. Built as a Single Page App. The server prerenders pages, but the full app is also booted on the client. A Single Page App, where the initial shell/skeleton is prerendered to static HTML at build time. A Single Page App. All logic, rendering, and booting is done on the client. HTML is essentially just <script> and style tags.
Authoring: Entirely server-side. Built as if client-side Built as if client-side Client-side Client-side
Rendering: Dynamic HTML Static HTML Dynamic HTML and JavaScript/DOM Partial static HTML, then JavaScript/DOM Entirely JavaScript/DOM
Server role: Controls all aspects (thin client) Delivers static HTML Renders pages Delivers static HTML Delivers static HTML
Pros: 👍 TTI = FCP
👍 Fully Streaming
👍 Fast TTFB
👍 TTI = FCP
👍 Fully Streaming
👍 Flexible 👍 Flexible
👍 Fast TTFB
👍 Flexible
👍 Fast TTFB
Cons: 👎 Slow TTFB
👎 Inflexible
👎 Inflexible
👎 Leads to hydration
👎 Slow TTFB
👎 TTI >>> FCP
👎 Limited Streaming
👎 TTI > FCP
👎 Limited Streaming
👎 TTI >>> FCP
👎 No Streaming
Scales via: Infra size / cost build/deploy size infra size and JavaScript size JavaScript size JavaScript size
Examples: Gmail HTML, Hacker News Docusaurus, Netflix Next.js, Razzle Gatsby, Vuepress Most apps