Client-Side Rendering
Definition
Client-side rendering, usually shortened to CSR, means the markup a visitor sees was never in the file the server sent. That file typically contains a head, a single empty div with an id like root, and a script tag. The script runs, fetches or computes whatever it needs, and writes elements into that div. React, Vue and Svelte apps all work this way by default, and so does almost anything generated in a chat window, because a single HTML file with a script is the easiest thing to produce. The opposite approach, server-side rendering, sends finished HTML and lets JavaScript take over afterwards; a static host cannot do that for you, since there is no process running to generate the markup.
Why It Matters
Two costs follow from the empty-file model. The first is time to first paint: the browser must download the HTML, then the JavaScript, then execute it, then paint — three round trips before anything appears, where server-rendered HTML paints on the first. On a 4G connection a 300 KB bundle can mean two seconds of white screen. The second is what other machines see. Google will usually execute JavaScript and index the result, but it queues that work separately and it can take days; other crawlers, and the bots behind link previews on Slack, WhatsApp and LinkedIn, generally do not run scripts at all. A CSR page shared into a chat shows a bare title and no description.
How It Works
The browser receives the HTML, sees no content, and parses on. It hits the script tag, fetches the JavaScript, and executes it. The framework creates a virtual representation of the interface, then calls DOM methods to insert real elements into the mount point. Any data comes from a fetch to an API after that, which is a fourth round trip. Routing is handled in the page too — client-side routing intercepts link clicks and swaps the view without a new request, which is why a static host needs an SPA fallback so that a deep URL still returns 'index.html'. The meta description and Open Graph tags, by contrast, must be in the served HTML, because the bots that read them never wait for a script.
Real-World Example
A team publishes a generated analytics dashboard at growth-view.99helpers.site through 99helpers. Pasted into Slack, the link unfurls with the address and nothing else, because the served file has one empty div. Adding a title, a meta description and Open Graph tags to the static HTML — content the script never touches — fixes the preview without changing the app at all. The dashboard still renders in the browser as before.
Common Mistakes
- ✕Expecting a link preview or a search snippet from a page whose body is empty until JavaScript runs
- ✕Putting the SEO tags into the JavaScript that builds the page — crawlers and preview bots read the served file, not the rendered one
- ✕Ignoring the blank-screen period on slow connections instead of showing a skeleton or a plain fallback message
- ✕Deploying client-side routing without an SPA fallback, so every URL except the homepage returns a 404 on refresh
Related Terms
Generated HTML
Generated HTML is markup produced by a program or a model rather than typed by a person. From a browser's point of view it is indistinguishable from hand-written HTML, and a static host serves it the same way.
ES Module
JavaScript's built-in module format, using import and export statements. Browsers load ES modules natively from a script tag with type set to module, with no bundler involved.
Single-Page Application
A single-page application loads one HTML file and then rewrites the page in the browser as you navigate, instead of fetching a new document for every link. The address bar still changes; the page never fully reloads.
Meta Description
A one-line summary of a page, written into a meta tag in the head of the HTML, that search engines often show as the grey text under a result. It affects clicks, not rankings.
Largest Contentful Paint
Largest Contentful Paint, or LCP, marks the moment the biggest visible element in the viewport has finished rendering. It is the closest single number to the question a visitor actually asks: when did this page look like it had loaded?
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →