Cara halaman dimuat; statis vs dinamis (kenapa requests tidak cukup)

Idenya

Web scraping berarti mengumpulkan data dari situs web dengan kode alih-alih menyalinnya secara manual: harga pesaing, ulasan produk, lowongan kerja, level stok. Bagi data analyst, ini cara mendapatkan data yang tidak akan pernah dikirim siapa pun kepadamu sebagai CSV.

Sebelum menulis scraper, kamu perlu memahami bagaimana sebuah halaman sebenarnya sampai di browser-mu, karena situs modern tidak mengirimkan halaman yang kamu lihat. Mereka mengirimkan titik awal, dan JavaScript membangun sisanya. Satu fakta itu menentukan tool mana yang kamu butuhkan.

Apa yang terjadi saat kamu membuka URL

Saat kamu mengetik https://nusantara-gadget.test/products dan menekan Enter, kira-kira inilah yang terjadi:

1. Browser-mu mengirim HTTP request ke server: "GET /products, tolong".
2. Server mengirim balik response: status code (200 berarti OK) dan body berisi HTML.
3. Browser membaca HTML dan menemukan hal-hal lain untuk diunduh: CSS untuk tampilan, gambar, dan file JavaScript.
4. Browser menjalankan JavaScript-nya. Di banyak situs modern, JavaScript itu mengirim request tambahan di latar belakang, biasanya ke API yang mengembalikan data mentah sebagai JSON, lalu memasukkan data itu ke halaman.
5. Akhirnya kamu melihat produk-produknya.

Langkah 4 dan 5 adalah tempat scraper sering terjebak.

Halaman statis

Pada halaman statis (atau server-rendered), datanya sudah ada di dalam response HTML pertama. Toko latihan kita, Nusantara Gadget, punya satu: /products. Kamu bisa mengambilnya dengan library requests, yang mengirim satu HTTP request dan memberimu response-nya:

import requests

response = requests.get("https://nusantara-gadget.test/products")
html = response.text
print(response.status_code)
print(html.count('class="product-card"'))

200
12

Dua belas kartu produk, langsung ada di HTML. Untuk halaman seperti ini, requests ditambah parser HTML sudah cukup.

Halaman dinamis

Sekarang halaman /catalog. Di browser halaman ini menampilkan produk yang sama, tetapi lihat apa yang diterima requests:

response = requests.get("https://nusantara-gadget.test/catalog")
html = response.text
print(html.count('class="product-card"'))
print("Loading products" in html)

0
True

Nol produk, hanya placeholder "Loading products…". Produk-produknya ditambahkan belakangan oleh JavaScript, dan requests tidak pernah menjalankan JavaScript. Ia mengunduh HTML dan berhenti di langkah 2. Inilah halaman dinamis (juga disebut client-side rendered), dan begitulah cara kerja sebagian besar toko besar, marketplace, dan situs media sosial saat ini.

Ini frustrasi pemula yang paling umum dalam scraping: "Datanya jelas ada di layarku, tetapi scraper-ku tidak melihat apa-apa." Sekarang kamu tahu alasannya.

Dari mana datanya berasal?

JavaScript mengambilnya dari sebuah API. Di situs ini katalognya memuat /api/products?page=1&per_page=12, dan kamu bisa me-request URL itu secara langsung:

data = requests.get("https://nusantara-gadget.test/api/products?page=1&per_page=12").json()
print(data["total"], "products in total")
print(data["items"][0]["name"], data["items"][0]["price"])

36 products in total
Galaxy A55 5G 5999000

.json() mengubah response JSON menjadi dictionary dan list Python. Data yang bersih dan terstruktur tanpa HTML yang perlu diurai. Menemukan API latar belakang seperti ini sering kali menjadi strategi scraping terbaik, dan kamu akan belajar menangkapnya dengan benar memakai network interception Playwright di level Advanced.

Masuklah Playwright: browser sungguhan yang kamu kendalikan dengan kode

Kadang kamu tidak bisa memanggil API secara langsung: API-nya butuh token yang diatur oleh JavaScript, cookie dari login, atau situsnya memblokir client HTTP biasa. Saat itulah kamu butuh browser sungguhan yang memuat halaman persis seperti manusia, lengkap dengan JavaScript-nya. Itulah yang diberikan Playwright: Chromium, Firefox, atau WebKit, dikendalikan dari Python.

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("https://nusantara-gadget.test/catalog")
    page.wait_for_selector(".product-card")
    print(page.locator(".product-card").count())
    browser.close()

12

Browser menjalankan JavaScript halaman itu, produk-produknya muncul, dan Playwright menghitungnya. Setiap baris dijelaskan dengan tuntas di modul-modul berikutnya; untuk sekarang, perhatikan bentuknya: jalankan browser, buka halaman, pergi ke URL, tunggu kontennya, baca.

Di komputermu sendiri kamu memasangnya dengan dua perintah, satu untuk package Python-nya dan satu untuk browser yang dikendalikannya:

uv add playwright

uv run playwright install chromium

Cara mengetahui jenis halaman yang kamu hadapi

Sebelum menulis kode apa pun, cek situsnya di browser biasamu:

• Lihat source halaman (Ctrl+U, atau Cmd+Option+U di Mac). Ini menampilkan HTML mentah yang dikirim server, sama dengan yang dilihat requests. Kalau datamu ada di sana, halaman itu statis untuk keperluanmu.
• Buka developer tools (F12), masuk ke tab Network, filter dengan Fetch/XHR, lalu reload. Request yang mengembalikan JSON adalah API latar belakang. Klik salah satunya dan lihat tab Response.
• Cari di source halaman sebuah nilai yang terlihat di layar, misalnya harga. Tidak ada? Berarti dimuat secara dinamis.

Mengapa ini penting untuk kode yang bersih

Scraper hanya seandal pemahamanmu tentang halamannya. Kalau kamu menulis otomasi browser untuk halaman yang statis, scraper-mu lambat dan rapuh tanpa alasan. Kalau kamu mem-parse HTML padahal ada JSON API yang bersih, scraper-mu akan rusak setiap kali situsnya mengubah layout. Menghabiskan lima menit di developer tools lebih dulu menghasilkan kode yang lebih sederhana, lebih cepat, dan lebih tangguh.

Rangkuman

• Halaman dimuat bertahap: HTML dulu, lalu CSS, gambar, dan JavaScript, lalu JavaScript mungkin mengambil data tambahan dari API.
• Halaman statis punya datanya di response HTML pertama. Halaman dinamis menambahkannya belakangan dengan JavaScript.
• requests hanya mendapat response pertama dan tidak pernah menjalankan JavaScript.
• Banyak halaman dinamis memuat JSON dari API, yang sering bisa kamu request secara langsung.
• Playwright mengendalikan browser sungguhan, jadi ia melihat apa yang dilihat manusia.
• Cek View Source dan tab Network sebelum memilih tool.