Web Architecture: Client, Server, and Database Flow

Trace a request before debugging a framework

A browser request crosses several boundaries: name resolution, connection/TLS, HTTP routing, application logic and possibly database access. A page that shows no data can fail at any one of them. Inspect the actual request and response before changing unrelated code.

Read request lifecycle

Browser
  -> HTTPS GET /api/courses/42
Reverse proxy / web server
  -> application route
Application
  -> parameterized database query
Database
  -> record or no result
Application
  -> HTTP status + JSON
Browser
  -> loading, success, empty or error UI

The database is normally accessed by the server, not directly with credentials embedded in browser JavaScript. A reverse proxy can serve static assets and forward API traffic to an application process.

HTTP contract

Use GET for reads without a requested state-changing operation. POST commonly creates or initiates an action. PUT/PATCH update according to the API's chosen semantics; DELETE removes. A success status must match what actually happened. Distinguish a missing record from an unavailable upstream service.

200  successful read
201  resource created
400  malformed request
401  authentication required or invalid
403  authenticated but not allowed
404  requested resource not found
409  conflict with current state
503  temporarily unavailable

These are common meanings, not a substitute for documenting your API. Avoid returning 200 with an HTML login page where the client expects JSON.

Latency and reliability

Total response time includes waiting, network transfer and processing at several layers. Use a request identifier to connect safe application logs. Timeouts prevent indefinite waiting; retries need limits and must account for whether a write may already have committed.

Cache boundaries

Public catalogue reads may be cacheable. Private account responses require deliberate cache controls. Do not put user-specific content into a shared cache key that omits user or tenant identity. A successful stale cache hit does not prove the underlying database is healthy.

Practice

1. Inspect one request in the browser Network panel: URL, method, status, response type and timing.
2. Simulate a missing course and verify 404 with a useful client message.
3. Stop the development backend and ensure the frontend reports temporary unavailability rather than “no courses exist”.
4. Draw where TLS terminates and where the application connects to its database.