Cum funcționează web-ul
Client, server, DNS, URL și origin — ce se întâmplă când deschizi o pagină.
Actualizat
Ce este web-ul, de fapt
Web-ul e o conversație între două programe:
- Clientul — de obicei browserul. Cere ceva.
- Serverul — un calculator care ascultă cereri și trimite răspunsuri (HTML, JSON, imagini).
Conversația are mereu aceeași formă: request → response. Fiecare pagină pe care o deschizi înseamnă zeci de astfel de perechi (HTML, CSS, JS, fonturi, imagini).
Ce se întâmplă când scrii o adresă
- URL-ul e despărțit în bucăți (protocol, domeniu, cale).
- DNS traduce domeniul (
learn-js.vercel.app) într-o adresă IP (76.76.21.21) — ca o agendă de telefon. - Browserul deschide o conexiune cu serverul (TCP + TLS pentru HTTPS).
- Trimite un request HTTP:
GET /js/functions. - Serverul răspunde cu HTML.
- Browserul citește HTML-ul, descoperă CSS/JS/imagini și le cere și pe ele.
- Construiește pagina și o desenează pe ecran (lecția Cum desenează browserul).
Anatomia unui URL
https://learn-js.vercel.app:443/js/functions?tab=exercitii#closurehttpsprotocollearn-js.vercel.apphost:443port/js/functionspath?tab=exercitiiquery#closurehash
| Parte | Rol |
|---|---|
| protocol | cum vorbim: https (criptat) sau http |
| host | ce server |
| port | ușa serverului; implicit 443 pentru https, 80 pentru http |
| path | ce resursă |
| query | parametri (?page=2&sort=new) — ajung la server |
| hash | poziție în pagină (#closure) — nu ajunge la server |
Origin
Origin = protocol + host + port. https://a.ro și https://a.ro/blog au același origin; https://api.a.ro are altul. Browserul izolează originile între ele — baza securității web (vezi Securitate).
Frontend, backend, full-stack
| Rulează | Exemple | |
|---|---|---|
| Frontend | în browser | HTML, CSS, JS, React |
| Backend | pe server | baze de date, autentificare, API-uri |
| Full-stack framework | în ambele | Next.js — Server Components rulează pe server, Client Components în browser |
Static vs dinamic
- Static — fișierul HTML e gata dinainte; serverul doar îl trimite. Foarte rapid, se poate pune pe CDN.
- Dinamic — HTML-ul e generat la fiecare cerere (depinde de user, de date proaspete).
Next.js le combină: părțile care pot fi statice sunt pre-generate, restul vine la cerere.
Pe scurt
- Web = client cere, server răspunde.
- DNS traduce domeniul în IP.
- URL = protocol + host + path + query + hash; origin = protocol + host + port.
- O pagină = zeci de request-uri.