Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
How a Full-Stack App Fits Together  ›  Lesson

Static Pages and Where They Stop

HTML 12 minA static site sends the same files to every visitor, and a feature needs a server and database as soon as it must remember something, differ per person, or keep a secret.

Static Pages and Where They Stop

Throughout this course you will build Sprout, a small app that helps people keep their houseplants alive. Its welcome page needs nothing but HTML and CSS files: upload them to any web host and anyone can open them. Then someone asks, "Can I save my plants?", and a folder of files has no answer. Knowing exactly where a static site stops tells you when you need the rest of the stack.

The rule

A static page is the same file for everyone; personal or changing data needs a server.

A static site is a folder of files:

sprout-site/
  index.html
  guides.html
  styles.css
  calculator.js

When a browser asks for /guides.html, the host finds that file and sends its bytes unchanged. Every visitor gets the identical file. That is not a weakness: static hosting is cheap, fast and hard to break, and it suits a landing page, documentation, a portfolio or a blog that is rebuilt whenever you publish.

JavaScript can still make a static page interactive. Sprout's watering calculator ("every 5 days from today") runs entirely in the browser. But everything the page knows either shipped inside those files or is kept in that one browser.

A static site stops being enough the moment you answer yes to any of three questions:

  1. Remember? Must something a visitor did survive for later, or show up on another device?
  2. Personal? Must different visitors see different data?
  3. Secret or checked? Must something stay hidden from the visitor, or a rule be enforced that they cannot skip?

Any yes means you need code on a machine you control (a server) and somewhere durable to keep data (a database).

The shortcut

Run the three-question test on each feature, not on the whole site. Most real apps are a mix: a few static pages plus a handful of features that need the server.

Which Sprout features can stay static?Step 1 of 4

  1. The welcome page

    Same text for everyone, nothing saved, nothing secret. Three noes: static.

The trap is localStorage. Saving plants there feels like a backend, but the data lives in one browser on one device. Clear the browser's data and the plants are gone, and your phone never sees them. It is fine for a draft or a theme preference, not for the records your app exists to keep.

Drills

Answer fast — trust the rule.

quick drill

A bakery shows the same menu to every visitor and rebuilds the site whenever the menu changes. What does it need?

quick drill

Which Sprout feature forces the app to have a server and a database?

quick drill

A developer keeps plants in localStorage and says Sprout no longer needs a server. What is the problem?

quick drill

Why can a static site not check a password safely?

Remember

  • A static page is the same file for everyone; personal or changing data needs a server.
  • Three-question test per feature: remember? personal? secret or checked? Any yes means server and database.
  • Trap: localStorage and in-page JavaScript feel like a backend, but they live in one browser the visitor controls.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainStatic or server?

A hiking club's site has an events page and a photo gallery, and now wants a 'sign up for a hike' button with a limit of 12 people per hike. Using the three questions, explain which parts can stay static and which need a server and a database.