The Round Trip: Browser to Database and Back
Open Sprout's "My plants" screen and a list appears in a fraction of a second. In that time a request crosses the internet, runs your server code, questions the database and travels all the way back. When something goes wrong, knowing each hop tells you exactly where to look.
The rule
Out through the server, down to the data, back as JSON, onto the screen.
Here is the whole trip for Sprout's plant list:
- Trigger. The screen appears and its JavaScript calls
fetch('/api/plants'). - Network. The browser finds the server's address (DNS), opens a secure connection (TLS) and sends the request, with the user's login cookie attached.
- Routing. The server matches the method and path,
GET /api/plants, to a handler function. - Identity. Before the handler, a check reads the cookie and works out which user is asking.
- Query. The handler asks the database for that user's plants.
- Rows to JSON. The database returns rows. The server turns them into JSON and picks a status code.
- Response. The answer travels back over the same connection.
- Render. JavaScript parses the JSON, stores it and redraws the list.
What actually crosses the network is plain text:
GET /api/plants HTTP/1.1
Host: sprout.example.com
Cookie: token=eyJhbGciOi...HTTP/1.1 200 OK
Content-Type: application/json
[{"id": 7, "name": "Fern", "water_every_days": 3, "last_watered": "2026-09-24"}]Notice that each layer only speaks to its neighbour. The browser never sees SQL, and the database never sees HTTP. The server is the translator between the two.
The shortcut
When something is wrong, walk the trip and find the first hop where the data is wrong. The browser's developer tools (the Network tab) show the request and response in the middle of the trip, so start there:
- Response correct, screen wrong: the bug is in the client.
- Response wrong: go down to the server's handler and its query.
- No response at all: the network or the server process is down.
- A 4xx status says the request was refused; a 5xx says the server failed.
The symptom
Asha added "Basil", but it is not in her list.
Guessing from the screen alone would have sent you into the React code. Checking the middle hop first cut the search in half.
Drills
Answer fast — trust the rule.
In Sprout's round trip, which layer turns database rows into JSON?
The Network tab shows the right five plants in the JSON, but only four appear on screen. Where is the bug most likely?
Which step happens before the server's handler code runs?
A request comes back 500 Internal Server Error. Where do you look first?
Remember
- Out through the server, down to the data, back as JSON, onto the screen.
- Shortcut: walk the trip and find the first wrong hop; the Network tab shows the middle.
- Trap: guessing from the screen alone. A wrong list can start in the handler, the query or the data.