JuuriSystems, explained
FrontendLesson 1 of 49 min

The request/response loop

Almost everything on the web is one machine politely asking another machine for a thing.

The web has one core move, repeated billions of times a second: a client asks for something, a server answers. That is it. Everything else (frameworks, databases, caches, deploy pipelines) is scaffolding around that one exchange.

One click, six steps
  1. Click
    The browser decides a new URL is needed.
  2. Resolve
    The name (example.com) is turned into a numeric address.
  3. Connect
    A secure channel is opened to that address.
  4. Request
    The browser sends a method, a path, and some headers.
  5. Respond
    The server sends a status code, headers, and a body.
  6. Render
    The browser turns the body into pixels, fetching more as it goes.

Notice that steps two through five involve machines you do not own and cannot see. When someone says "the site is slow", they have told you nothing about which of those six steps is slow. Learning to ask "slow where?" is most of debugging.

The four parts of a request

  • A method: the verb. GET means "give me", POST means "here, take this".
  • A path: which thing, like /courses/databases.
  • Headers: metadata about the request, like who you are and what formats you accept.
  • A body: the payload, only present on requests that are sending something.

A response has almost the same shape: a status code instead of a method, then headers, then a body. When you read a network tab or a server log, you are reading these four things over and over. They are the vocabulary.

When my app fetches data, is that a separate request from the one that loaded the page?

It usually is, and that is why a page can appear instantly and then sit there with a spinner. Two requests, two chances to be slow.

What to remember

  • Client asks, server answers. Everything else is decoration on that.
  • Requests are stateless by default, so memory has to be added on purpose.
  • A request is a method, a path, headers, and maybe a body.

Terms in this lesson

ClientServerHTTPStatelessStatus code

Show field notes toggles a search param the loader reads. With it off, the slow promise is never created, so nothing streams.