Rendering JavaScript melalui proxy: solusi masalah saat parsing

Situs web modern secara aktif menggunakan JavaScript untuk memuat konten. Ini menciptakan masalah saat otomasi: permintaan HTTP biasa mengembalikan halaman kosong alih-alih data. Kami akan menjelaskan bagaimana server proxy membantu menyelesaikan tugas ini dan alat apa yang digunakan untuk tujuan ini.

Apa masalah rendering JavaScript

Ketika Anda mengirim permintaan GET biasa ke situs menggunakan requests atau curl, browser menerima file HTML dengan kontainer kosong. Konten sebenarnya dimuat kemudian melalui JavaScript:

• Pemuatan data dinamis — konten datang melalui permintaan AJAX setelah halaman dimuat
• Single Page Applications (SPA) — React, Vue, Angular merender semua konten di klien
• Perlindungan dari bot — situs secara khusus menggunakan JS untuk memeriksa bahwa ini adalah browser nyata
• Pemuatan malas (lazy loading) — gambar dan teks dimuat hanya saat scroll

Hasilnya: parser melihat halaman kosong, meskipun semuanya ditampilkan dengan normal di browser. Ini disebut masalah rendering.

Mengapa proxy membantu

Proxy sendiri tidak merender JavaScript. Tetapi mereka menyelesaikan dua masalah kritis:

1. Melewati pemblokiran berdasarkan IP

Situs memblokir permintaan otomatis berdasarkan alamat IP. Jika Anda mengirim ratusan permintaan dari satu IP, server akan memblokir Anda. Proxy menyembunyikan IP asli Anda, mendistribusikan permintaan melalui alamat berbeda. Ini memungkinkan browser otomasi (Selenium, Puppeteer) bekerja tanpa pemblokiran.

2. Meniru browser nyata

Ketika Anda menggunakan proxy bersama dengan alat seperti Puppeteer atau Selenium, sistem terlihat seperti browser nyata. Ini membantu melewati pemeriksaan bot dan mendapatkan HTML yang sepenuhnya dirender.

Proxy mana yang digunakan

Berbagai jenis proxy cocok untuk rendering JavaScript. Pilihan tergantung pada tugas:

Untuk rendering JavaScript direkomendasikan: mulai dengan pusat data untuk pengujian, kemudian beralih ke residensial jika situs memblokir permintaan otomatis.

Alat untuk rendering JavaScript

Puppeteer

Browser headless berdasarkan Chromium. Ideal untuk otomasi dan parsing. Bekerja dengan proxy melalui parameter konfigurasi.

Selenium

Alat universal untuk otomasi web. Mendukung browser berbeda (Chrome, Firefox, Edge) dan mudah terintegrasi dengan proxy.

Playwright

Alternatif modern Puppeteer dengan dukungan Chromium, Firefox, dan WebKit. Pilihan bagus untuk pengujian lintas browser.

Splash (Scrapy)

Layanan rendering JavaScript ringan. Dapat dijalankan secara lokal atau menggunakan versi cloud.

Contoh praktis dengan kode

Contoh 1: Puppeteer dengan proxy

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: [
      '--proxy-server=http://proxy-server:port'
    ]
  });

  const page = await browser.newPage();
  
  // Pengaturan proxy dengan autentikasi (jika diperlukan)
  await page.authenticate({
    username: 'user',
    password: 'pass'
  });

  await page.goto('https://example.com', {
    waitUntil: 'networkidle2'
  });

  const content = await page.content();
  console.log(content);

  await browser.close();
})();

Yang terjadi:

• --proxy-server — menentukan server proxy
• page.authenticate() — meneruskan kredensial untuk proxy
• waitUntil: 'networkidle2' — menunggu pemuatan lengkap semua sumber daya

Contoh 2: Selenium dengan proxy di Python

from selenium import webdriver
from selenium.webdriver.common.proxy import Proxy, ProxyType

proxy = Proxy()
proxy.proxy_type = ProxyType.MANUAL
proxy.http_proxy = "proxy-server:port"
proxy.ssl_proxy = "proxy-server:port"

options = webdriver.ChromeOptions()
options.add_argument('--start-maximized')

capabilities = webdriver.DesiredCapabilities.CHROME
proxy.add_to_capabilities(capabilities)

driver = webdriver.Chrome(
  desired_capabilities=capabilities,
  options=options
)

driver.get('https://example.com')
content = driver.page_source
print(content)

driver.quit()

Contoh 3: Menangani konten dinamis

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# Inisialisasi dengan proxy
driver = webdriver.Chrome()
driver.get('https://example.com')

# Tunggu pemuatan elemen (hingga 10 detik)
element = WebDriverWait(driver, 10).until(
  EC.presence_of_element_located((By.CLASS_NAME, "dynamic-content"))
)

# Ekstrak teks setelah rendering
data = element.text
print(data)

driver.quit()

Praktik terbaik

1. Rotasi proxy

Jangan gunakan proxy yang sama untuk semua permintaan. Bergantian dengan alamat IP untuk menghindari pemblokiran:

import random

proxies = [
  'http://proxy1:port',
  'http://proxy2:port',
  'http://proxy3:port'
]

selected_proxy = random.choice(proxies)
# Gunakan selected_proxy untuk setiap permintaan

2. User-Agent

Ubah User-Agent agar terlihat seperti browser berbeda:

options = webdriver.ChromeOptions()
options.add_argument('user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36')

3. Penundaan antar permintaan

Tambahkan penundaan acak untuk meniru perilaku manusia:

import time
import random

time.sleep(random.uniform(2, 5))  # Penundaan 2-5 detik

4. Penanganan kesalahan

Selalu tangkap pengecualian dan catat masalah:

try:
  driver.get(url)
  content = driver.page_source
except Exception as e:
  print(f'Kesalahan: {e}')
  # Beralih ke proxy lain atau coba lagi

5. Menutup browser

Selalu tutup browser setelah digunakan untuk membebaskan sumber daya:

try:
  # Kode Anda
finally:
  driver.quit()  # Menjamin penutupan bahkan saat terjadi kesalahan

Kesimpulan

Rendering JavaScript bukan hanya tantangan teknis, tetapi kebutuhan di web modern. Berikut yang perlu diingat:

• Masalah: parser biasa tidak melihat konten dinamis yang dimuat melalui JavaScript
• Solusi: browser otomasi (Puppeteer, Selenium) + server proxy
• Pilihan proxy: pusat data untuk pengujian, residensial untuk situs terlindungi
• Praktik terbaik: rotasi IP, penundaan, penanganan kesalahan, User-Agent

Kombinasi browser otomasi dan server proxy memungkinkan pengumpulan data yang andal bahkan dari situs paling kompleks. Saat memilih alat, pertimbangkan skala tugas: untuk proyek kecil, Puppeteer cocok, untuk proyek besar — Selenium atau solusi khusus.