Pages or Data: Who Builds the HTML?
Two web apps can look identical and still split the work in opposite ways. In one, the server sends finished HTML and the browser simply shows it. In the other, the server sends raw data and JavaScript in the browser builds the page. Sprout could be built either way, so it is worth knowing what each choice buys.
The rule
Either the server sends a finished page, or it sends data and the browser builds it.
Server-rendered. A request for /plants runs a query on the server, pours the rows into an HTML template and returns a complete page with Content-Type: text/html:
<ul>
<li>Fern, water every 3 days</li>
<li>Cactus, water every 21 days</li>
</ul>Every click that moves to another page asks the server for another finished page.
Client-rendered. The first response is a small HTML shell plus a JavaScript bundle. Once loaded, the JavaScript calls an API such as /api/plants and receives only data:
[{"id": 7, "name": "Fern", "water_every_days": 3},
{"id": 9, "name": "Cactus", "water_every_days": 21}]The browser turns that JSON into the list itself. From then on, only data travels.
| Server sends HTML | Server sends JSON | |
|---|---|---|
| First view | content arrives in the first response | waits for the script, then the data |
| Search engines | see the content directly | may see an empty shell |
| After loading | a new page per navigation | small data requests; feels like an app |
| A future phone app | needs a separate API | reuses the same API |
Many modern frameworks mix the two: they render the first view on the server, then let JavaScript take over in the browser. The question "who builds this HTML?" still decides where each piece of code runs.
This course builds Sprout's logged-in screens as a React client over a JSON API. Those screens sit behind a login, so search engines never see them anyway, and the same API can later serve a phone app.
The shortcut
To see which kind of page you are looking at, open the Network tab and read the response that carries the main content: HTML with your data inside means the server built it; JSON means the browser will. To choose for a new page, ask: "Who is this page for: strangers arriving from search, or a logged-in user clicking around?"
Welcome page
Public, should appear in search results, the same for everyone. Static or server-rendered HTML.
Drills
Answer fast — trust the rule.
A response to GET /plants has Content-Type: text/html and contains <li>Fern, water every 3 days</li>. How was the list built?
What does a client-rendered app's first HTML response usually contain?
Sprout plans an Android app. Which design lets it reuse the most server code?
Why is Sprout's logged-in dashboard a good fit for client rendering?
Remember
- Either the server sends a finished page, or it sends data and the browser builds it.
- Shortcut: public and searchable leans to server HTML; private and interactive leans to a JSON API.
- Trap: choosing one style for the whole site. Decide page by page, and keep the API reusable.