How the Internet Works — Dasar Wajib untuk Web Developer!

1. Pendahuluan: Kenapa Harus Paham Dasar Internet?

Banyak web developer jago ngoding framework modern, tapi bingung ketika aplikasi lambat, error, atau gagal koneksi. Kenapa? Karena nggak paham dasar cara kerja internet.

Kalau kamu paham cara internet bekerja, kamu jadi ngerti kenapa request bisa gagal, kenapa loading lama, dan gimana cara debug-nya.

🍳 Analogi: Jangan jadi koki yang jago masak tapi nggak tahu cara kerja kompor dan ventilasi di dapurnya.

2. Bagaimana Internet Bekerja (Dari Atas ke Bawah)

a. User Mengetik URL

Misal: kamu buka https://blog.hasanh.dev di browser.

• Browser akan konversi domain jadi alamat IP lewat DNS.
• Request dikirim via ISP menuju server tujuan.
• Server merespons dengan konten web.

b. DNS Resolution

• DNS = Domain Name System

• Fungsi: menerjemahkan nama domain (blog.hasanh.dev) ke IP address.

• Jenis record DNS:

  • A: alamat IPv4
  • CNAME: alias ke domain lain
  • MX: untuk email

Tools untuk eksplorasi:

dig blog.hasanh.dev
nslookup blog.hasanh.dev

📖 Analogi: DNS seperti buku telepon internet—menerjemahkan nama ke nomor.

c. HTTP & HTTPS

• HTTP = HyperText Transfer Protocol

• Komunikasi client-server: request → response

• Struktur HTTP:

  • Header
  • Body
  • Status Code (200, 404, 500…)

• HTTPS = HTTP + TLS (secure)

• HTTPS penting untuk:

  • Keamanan (data terenkripsi)
  • SEO (Google menyukai HTTPS)

3. Hosting & Server

• Web hosting = tempat menyimpan website

• Jenis:

  • Shared Hosting: murah tapi berbagi resource
  • VPS: server virtual, lebih fleksibel
  • Dedicated: satu server penuh
  • Cloud: scalable (AWS, GCP, Vercel)

Lokasi server mempengaruhi latency. Server lebih dekat = akses lebih cepat.

4. Domain Name System & CDN

• CDN = Content Delivery Network

• Contoh: Cloudflare, Akamai

• Konsep: caching konten statis di server edge

• Manfaat CDN:

  • Performa: konten lebih dekat ke user
  • Keamanan: filtering, DDoS protection

5. Browser: Mesin Rendering & Dev Tools

Browser mengubah HTML, CSS, dan JS menjadi tampilan web:

Rendering pipeline:

HTML → DOM
CSS → CSSOM
DOM + CSSOM → Render Tree → Layout → Paint

Konsep penting:

• Critical Rendering Path
• Caching (HTTP cache, Service Worker)
• Prefetch, Preload

Gunakan Chrome DevTools:

• Tab Network: lihat semua request
• Tab Performance: lihat timeline render

6. Ilustrasi Flow Internet

User → DNS Query → Get IP
→ TCP Handshake → TLS Handshake
→ HTTP Request → Web Server
→ HTTP Response → Browser Render

7. Tips Belajar Dasar Internet Secara Praktis

• Jangan cuma baca teori — coba langsung!
• Tools yang bisa dicoba:

curl https://blog.hasanh.dev
ping blog.hasanh.dev
traceroute blog.hasanh.dev
dig blog.hasanh.dev

• Coba deploy ke Vercel/Netlify dan cek:

  • DNS settings
  • CDN config
  • HTTP headers

8. Kesimpulan

Paham cara kerja internet = fondasi kuat untuk web development.

Saat scaling, debug, atau audit security, kamu nggak cuma andalkan library—tapi paham apa yang sebenarnya terjadi.

Web modern = gabungan antara coding, networking, dan arsitektur sistem.

🔗 Baca Juga

• How HTTP Works — Headers, Status Codes, Caching, dan Cookies
• DNS Deep Dive — Dari Record Sampai DNS Spoofing
• CDN 101 — Arsitektur & Praktik Implementasinya