Flow Lengkap Saat Membuka Website: Dari Browser ke Server dan Kembali

Ketika Anda mengetikkan URL seperti https://tokopedia.com di browser dan menekan Enter, tampaknya sederhana—halaman web muncul dalam hitungan detik. Namun, di balik layar, ada proses kompleks yang melibatkan jaringan global, protokol keamanan, dan koordinasi antar server di seluruh dunia. Artikel ini akan menjelaskan flow lengkap secara detail dan teknis, mulai dari parsing URL hingga rendering halaman. Kami akan integrasikan konsep-konsep kunci seperti hierarki DNS (termasuk Root Server), peran DNS Resolver seperti 8.8.8.8, routing dengan BGP, dan bahkan contoh data mentah TCP.

Proses ini biasanya memakan waktu kurang dari satu detik, tapi melibatkan ribuan kilometer kabel bawah laut, satelit, dan algoritma cerdas. Kami gunakan contoh https://tokopedia.com untuk ilustrasi, di mana IP address-nya bisa seperti 47.74.244.18 (berdasarkan data terkini). Asumsi kita gunakan HTTPS untuk keamanan modern.

1. Memasukkan URL di Browser: Parsing Awal

Semuanya dimulai saat Anda mengetik URL di address bar browser (seperti Chrome atau Safari). Browser mem-parse URL sesuai standar RFC 3986:

  • Scheme/Protocol: https (menentukan protokol aman; default ke http jika tidak disebutkan).

  • Host/Domain: tokopedia.com.

  • Port: Default 443 untuk HTTPS (80 untuk HTTP).

  • Path: / (root) atau /products jika spesifik.

  • Query String: Misalnya, ?search=barang untuk parameter pencarian.

  • Fragment: #section untuk navigasi internal (tidak dikirim ke server).

Jika URL tidak lengkap, browser tambahkan default berdasarkan history atau konfigurasi. Ini proses in-memory, tanpa jaringan yet. Browser juga cek cache internalnya untuk menghindari request ulang jika halaman sudah di-cache.

2. DNS Resolution: Mencari Alamat IP Server

Browser butuh IP address server untuk terhubung, bukan nama domain. Di sinilah DNS (Domain Name System) berperan sebagai "buku telepon" internet. Proses ini recursive dan hierarkis, dimulai dari atas piramida DNS.

Langkah-langkah DNS Lookup:

  1. Check Cache Lokal:

    • Browser cache: Chrome simpan di memori atau chrome://net-internals/#dns.

    • OS cache: Di Mac/Windows, cache sistem (flush dengan ipconfig /flushdns di Windows).

    • Jika ada, gunakan IP cached (dengan TTL—Time To Live, misalnya 3600 detik untuk kadaluarsa).

  2. Query DNS Resolver:

    • Jika cache kosong, browser tanya DNS Resolver lokal (default dari ISP, atau custom seperti 8.8.8.8 dari Google).

    • Resolver ini adalah "pemandu lokal" yang cepat. Bukan pemilik data asli (authoritative), tapi ahli mencari. Contoh: 8.8.8.8 adalah Public DNS Resolver Google, gratis dan andal. Kenapa pakai ini? Lebih cepat, anti-sensor ISP, dan cache agresif untuk percepatan.

  3. Hierarki DNS (Jika Resolver Belum Tahu): Resolver lakukan recursive query dari atas:

    • Root Server: Puncak piramida. Ada 13 named authorities (a.root-servers.net hingga m.root-servers.net), tapi ribuan instances fisik (sekitar 1984 pada 2025) tersebar global untuk redundansi. Dikelola oleh organisasi seperti Verisign, NASA, dan universitas. Isinya sederhana: Daftar TLD (Top-Level Domain) servers. Untuk .com, arahkan ke TLD server Verisign. Resolver tanya: "Siapa yang handle .com?"

    • TLD Server: Untuk .com, Verisign (ada 1443 TLD pada 2025, termasuk .id oleh PANDI). TLD server punya NS (Name Server) record domain spesifik. Tanya: "Siapa NS untuk tokopedia.com?" Jawab: ns1.tokopedia.com dan ns2.tokopedia.com.

    • Authoritative Nameserver: Milik domain (e.g., Tokopedia). Ini "penulis buku" asli. Tanya: "Apa IP tokopedia.com?" Jawab: A record seperti 47.74.244.18 (IPv4) atau AAAA untuk IPv6.

Analogi DNS:

Seperti mencari alamat rumah:

  1. Browser tanya pemandu lokal (Resolver seperti 8.8.8.8).

  2. Pemandu tanya pusat imigrasi (Root Server): ".com di mana?"

  3. Root arahkan ke catatan sipil .com (Verisign TLD).

  4. Verisign arahkan ke manajer properti (NS Tokopedia).

  5. NS beri IP final.

Proses ini pakai UDP port 53 (atau TCP jika respons besar). Jika gagal, error seperti "DNS_PROBE_FINISHED_NXDOMAIN". DNS over HTTPS (DoH) tambah keamanan.

3. Routing Paket Data dengan BGP: Menuju Server

Setelah dapat IP (e.g., 47.74.244.18), paket data harus dirutekan melewati internet—jaringan dari ribuan jaringan independen (Autonomous Systems atau AS). Di sinilah BGP (Border Gateway Protocol) berperan sebagai "GPS" global.

Konsep BGP:

  • Internet adalah "network of networks". Setiap AS punya ASN (AS Number) unik, e.g., AS17451 untuk Biznet Indonesia atau AS45102 untuk Alibaba (host Tokopedia).

  • BGP atur routing antar AS via router border.

Cara Kerja BGP:

  • Route Announcement: AS "iklankan" prefix IP yang mereka handle. Misalnya, AS Alibaba umumin: "Kirim paket ke 47.74.244.18 lewat saya!"

  • Peering: AS bertetangga via perjanjian, tukar info routing.

  • Path Selection: Pilih jalur "terbaik" berdasarkan AS-Path (jumlah hop AS minim), kebijakan lokal, biaya. Bukan selalu terpendek—bisa hindari pesaing. Contoh: Paket dari Indonesia ke server Tokopedia di Singapore bisa lewat AS Telkom → AS Singtel → AS Alibaba, dengan BGP pilih rute efisien (e.g., transit lewat sedikit AS).

Analogi: Sistem pos global—paket lompat antar "negara" (AS) berdasarkan peta BGP yang dinamis. Tanpa BGP, paket hilang di tengah jalan.

4. Establish TCP Connection: 3-Way Handshake

Dengan IP dan port (443), browser buka TCP connection untuk reliable transport.

  • 3-Way Handshake:

    • SYN: Client kirim SYN flag.

    • SYN-ACK: Server respons.

    • ACK: Client konfirmasi.

Contoh Raw Data TCP (Header SYN Paket):

Data mentah dalam hex (dari Wireshark/tcpdump):

c7 1b 01 bb 00 00 03 e8 00 00 00 00 50 02 ff ff b1 e4 00 00

Bedah:

Hex
Field
Desimal
Penjelasan

c7 1b

Source Port

50971

Port acak client.

01 bb

Dest Port

443

HTTPS.

00 00 03 e8

Sequence Num

1000

Urutan awal.

00 00 00 00

ACK Num

0

Awal koneksi.

50 02

Header Len & Flags

20 bytes, SYN

SYN aktif (02).

ff ff

Window Size

65535

Buffer siap.

b1 e4

Checksum

45540

Verifikasi error.

00 00

Urgent Pointer

0

Tidak urgent.

Payload kosong di SYN. Ini encapsulation di IP packet, routed via BGP.

5. TLS Handshake: Mengamankan Koneksi (HTTPS)

Atas TCP, lakukan TLS 1.3 handshake:

  • Client Hello: Dukungan cipher, SNI (tokopedia.com).

  • Server Hello: Pilih cipher, kirim cert.

  • Verifikasi: Browser cek cert chain ke root CA.

  • Key Exchange: ECDHE untuk shared key.

Hasil: Enkripsi simetris, integrity.

6. Mengirim HTTP Request

Kirim request: GET / HTTP/2 dengan headers (Host, User-Agent). Body kosong untuk GET.

7. Server Memproses Request

Paket tiba di server Tokopedia (via BGP routing). Web server (e.g., Nginx) parse, proses logic (query DB), generate response.

8. Server Mengirim HTTP Response

Response: HTTP/2 200 OK, headers (Content-Type: text/html), body (HTML Tokopedia).

9. Browser Merender Response

Parse HTML ke DOM, fetch assets (CSS/JS via parallel connections), execute JS, paint ke screen.

10. Menutup Koneksi

Jika keep-alive, reuse; else, TCP FIN-ACK.

Kesimpulan

Flow ini tunjukkan keajaiban internet: Dari DNS hierarkis (root ke authoritative) hingga BGP routing global, semuanya sinkron untuk pengalaman seamless. Di 2025, dengan 1984 root instances dan TLD bertambah, sistem ini makin robust. Untuk debug, gunakan tools seperti dig, traceroute (lihat BGP hops), atau Wireshark. Pahami ini krusial untuk developer atau engineer jaringan!

Previous12 Factor AppNextAbstract Class VS Interface

Last updated