How a Web App Works

From typing a URL to seeing the page — the full request round-trip

How a Web App Works From typing a URL to seeing the page — the full request round-trip User · Browser · Architecture component · types webapp.com User Browser types webapp.com DNS Server · webapp.com → 117.20.31.21 · Architecture component · phone book of the internet DNS Server webapp.com → 117.20.31.21 phone book of the internet Frontend (SPA) · React / Vue — HTML, CSS, JS · Server @ 117.20.31.21 · runs in the browser Frontend (SPA) React / Vue — HTML, CSS, JS runs in the browser Backend (API) · NodeJS / Go — REST / JSON · Server @ 117.20.31.21 · logic + auth Backend (API) NodeJS / Go — REST / JSON logic + auth Database · PostgreSQL / MySQL · Server @ 117.20.31.21 · stored data Database PostgreSQL / MySQL stored data ① look up webapp.com ② returns IP ③ GET http://117.20.31.21 ④ sends back SPA (HTML + JS) ⑤ API call ⑥ query ⑦ rows ⑧ JSON Server @ 117.20.31.21

Name resolution (①②)

  • • Browser knows the name webapp.com, not where it lives
  • • DNS is the internet's phone book: name → IP address
  • • Answer: 117.20.31.21 — the server's real address

Load the app (③④)

  • • Browser sends an HTTP GET to that IP
  • • Server returns the SPA: HTML + CSS + JavaScript
  • • The UI now runs inside the browser — no reload per click

Fetch the data (⑤–⑧)

  • • App calls the backend API for data (⑤)
  • • Backend queries the database (⑥); DB returns rows (⑦)
  • • Backend turns rows into JSON, sends it to the frontend (⑧) — the page renders