HTTP: methods, statuses, headers
The language between browser and server, HTTP caching and what idempotent means.
Updated
What HTTP is
HTTP is the language the browser and the server speak. An HTTP message is text with three parts: a start line, headers (metadata) and, optionally, a body (content).
GET /api/posts?page=2 HTTP/1.1 ← method + path
Host: learn-js.vercel.app ← headers
Accept: application/json
Cookie: vid=9e88...
HTTP/1.1 200 OK ← status
Content-Type: application/json
Cache-Control: max-age=60
[{"id":1,"title":"Hello"}] ← body
HTTP is stateless — every request is independent; the server doesn't "remember" anything between them. That's why cookies exist.
Methods
| Method | Role | Has a body | Idempotent |
|---|---|---|---|
GET |
read | no | yes |
POST |
create / trigger an action | yes | no |
PUT |
replace completely | yes | yes |
PATCH |
modify partially | yes | usually no |
DELETE |
delete | rarely | yes |
Idempotent = repeating the request 5 times has the same result as doing it once. GET must never change data — browsers and crawlers may repeat it at any time.
Status codes
| Class | Meaning | Most used |
|---|---|---|
2xx |
success | 200 OK, 201 Created, 204 No Content |
3xx |
redirect | 301 permanent, 302/307 temporary, 304 Not Modified |
4xx |
the client's mistake | 400 invalid data, 401 unauthenticated, 403 forbidden, 404 missing, 429 too many requests |
5xx |
the server's mistake | 500 internal error, 502/503 service unavailable |
401 vs 403: 401 = "I don't know who you are", 403 = "I know who you are, but you're not allowed".
Important headers
| Header | Direction | Role |
|---|---|---|
Content-Type |
both | the body format: application/json, text/html |
Authorization |
request | access token |
Cookie / Set-Cookie |
req / res | cookies |
Cache-Control |
response | how long it may be cached |
Location |
response | where a 3xx redirects |
HTTP caching
Cache-Control tells the browser and the CDN how long they may reuse a response without asking again:
| Value | Effect |
|---|---|
max-age=3600 |
fresh for 1 hour |
no-cache |
may be stored, but revalidate with the server before use |
no-store |
never store it (sensitive data) |
public / private |
may be stored by a CDN / only by the browser |
stale-while-revalidate=60 |
serve the stale version, refresh in the background |
The last one is exactly the idea behind revalidateTag(tag, 'max') in Next.
HTTP/1.1, HTTP/2, HTTP/3
Same semantics (methods, statuses, headers), more efficient transport: HTTP/2 sends many files over a single connection; HTTP/3 runs over QUIC (better on mobile networks). As a frontend developer, your code stays the same.
Common mistakes
- Changing data with
GET(links like/delete?id=5). - Returning
200with{ error: '...' }instead of a proper status. - Caching private responses (
publicon user data).
Summary
- Request = method + URL + headers + body; response = status + headers + body.
- GET reads, POST creates, PUT/PATCH modify, DELETE deletes.
- 4xx = the client's fault, 5xx = the server's fault.
Cache-Controldecides how long a response lives in the cache.