Static site vs. server rendering
When prebuilt HTML is enough, and when pages have to be rendered on each request.
By Frontsiter · Published · 3 min read
The problem
You are building a website and have to choose how its pages are produced. A static site is built once into HTML files that any host can serve. With server rendering, a server builds each page when someone asks for it. Some frameworks, such as Next.js, also offer incremental regeneration (ISR): pages are built ahead of time and rebuilt on a server after a set time. The choice decides where you can host, what the site costs to run, and how fresh the content can be.
Options compared
| Criteria | Static siteRecommended | Server rendering | Incremental (ISR) |
|---|---|---|---|
| Hosting | StrongAny web server or CDN | WeakA Node.js server or a serverless platform | MixedA server or a platform that supports ISR |
| Page speed | StrongPrebuilt files, served from a cache | MixedDepends on how fast the server responds | StrongPrebuilt files, refreshed in the background |
| Fresh data | WeakOnly after you rebuild and redeploy | StrongOn every request | MixedAfter the set time |
| Running cost | StrongLow: plain file hosting | WeakHigher: server work for each request | MixedMedium: server work on each refresh |
The trade-off
A static site trades freshness for cost and simplicity. It cannot show different content to each visitor or change between builds, but any low-cost host can serve it, and there is no server to run or secure. Server rendering gives fresh, per-visitor pages, but every request costs server time. ISR sits in between, and it still needs a server.
How to set it up
Most frameworks can build a static site. Each writes the HTML files to a folder that you upload to your host:
| Framework | Static build | Output folder |
|---|---|---|
| Next.js | output: "export" in next.config.ts | out/ |
| Astro | The default (output: "static") | dist/ |
| Nuxt | Run nuxt generate | .output/public/ |
| SvelteKit | @sveltejs/adapter-static, with prerender = true | build/ |
Before you choose, check that you do not need anything that runs on a server when a request arrives, such as form handling, logins with cookies, or redirects set in the framework. Those need a third-party service or a move to server rendering.
When to choose something else
Choose server rendering, or ISR, when pages differ for each visitor (an account page or a cart), when content must update within seconds (prices or stock levels), or when the site has too many pages to build every time.
Frontsiter's first version is a static site, built with Next.js and served from shared hosting with no Node.js server. At launch, its homepage scored 99 for performance on mobile and 100 on desktop in Google PageSpeed Insights.