Key idea
Web projects come in three shapes, set by what the server does for each request: hand over a file that already exists (a static site), build the page (a server-rendered app), or answer with data the browser turns into a page (a single-page app and an API). Choose by whether pages change per visitor and how much happens on screen.
Static site
Every page is a file made before anyone visits: HTML, CSS, JavaScript and images. A build step can produce them from templates or Markdown, with tools such as Hugo, Astro or vite build. After that, the server's only job is handing files over, so it's fast and there's little to break.
It fits documentation, landing pages, blogs and portfolios. On its own it can't show data that's different for each visitor or save what they type.
Server-rendered app
The server builds the HTML for each request: it reads the database, fills in a template and sends a finished page. Rails, Django, Laravel and Express with templates all work this way.
It fits sites where pages depend on who's signed in or on changing data, like a store or a forum. The cost is a server running all the time, and every new page is a trip to it.
Single-page app and an API
The browser downloads one app, built with a framework such as React, Vue or Svelte, and draws every page itself. For data, it calls an API: a backend that answers with data, usually JSON, instead of pages. The next module is about APIs.
It fits app-like screens with a lot happening on them: dashboards, editors, chat. The same API can serve a mobile app too. The costs: two parts to build and deploy, and a slower first load, because the browser runs the app before it shows anything.
The app itself is only files once built, like a static site. The API is the part that needs a server.
Choosing
| Shape | Per request, the server | Pages differ per visitor | Good for |
|---|---|---|---|
| Static site | Hands over a file | No | Docs, landing pages, blogs |
| Server-rendered app | Builds the page | Yes | Stores, forums, account pages |
| Single-page app and API | Answers with data | Yes, drawn in the browser | Dashboards, editors, apps with a mobile client |
Start with the simplest shape that fits. Many products use two: a static marketing site, and an app behind the sign-in.
Frameworks that do all three
Next.js, Nuxt and SvelteKit can make one page static, render another on the server and run a third in the browser, all in one project. The shapes still apply page by page. When you deploy, the project as a whole needs a server if any page is rendered on request.
Check yourself