Arsitektur web modern jarang mengandalkan HTML statis. Konten disuntikkan melalui JavaScript, diambil melalui API, atau dirender di sisi klien menggunakan kerangka kerja seperti React atau Vue. MultiLipi direkayasa untuk menangani ini "DOM yang Mudah Berubah." Skrip kami tidak hanya menerjemahkan halaman sekali saat dimuat; ia membangun koneksi persisten MutationObserver untuk mendeteksi dan menerjemahkan node baru saat disuntikkan ke dalam pohon DOM.

Panduan ini menjelaskan bagaimana infrastruktur kami menangani payload dinamis, permintaan AJAX, dan status interaktif.

1. Tantangan Konten "Mudah Berubah"

Proksi terjemahan standar gagal ketika konten berubah setelah pemuatan awal.

MultiLipi mendukung:

Client-Side Rendering (CSR)

Aplikasi yang dibangun di atas React, Vue, Angular, atau Svelte.

Fetch Asinkron

Konten yang dimuat melalui API AJAX/Fetch (misalnya, infinite scroll atau hasil pencarian).

Status Interaktif

Kesalahan validasi formulir, total keranjang, dan notifikasi toast.

2. Arsitektur Rekayasa

Cara kami menerjemahkan tanpa merusak aplikasi Anda.

Mesin JavaScript kami menjalankan proses pemantauan berkelanjutan di sisi klien:

Observasi DOM:

MutationObserver

Kami memanfaatkan API MutationObserver asli peramban untuk mengamati perubahan pada .

Deteksi:

Saat aplikasi Anda menyuntikkan

baru (misalnya, membuka modal), pengamat kami akan segera menandainya.

Injeksi Instan:

< 50ms

Teks dikirim ke cache lokal atau API kami. Jika terjemahan ada di memori, teks tersebut akan ditukar secara instan (seringkali dalam waktu kurang dari 50ms), tampak mulus bagi pengguna.

Pelestarian Status:

text nodes only

Kami hanya memodifikasi node teks. Kami tidak menghancurkan elemen DOM atau menghapus event listener, memastikan binding React/Vue Anda tetap utuh.

3. Praktik Terbaik untuk Teks Dinamis

Untuk memastikan MutationObserver bekerja secara efisien, ikuti panduan arsitektur ini:

Node Teks yang Stabil

Hindari string yang berubah setiap detik (seperti penghitung waktu mundur: "00:01", "00:02"). Ini membanjiri mesin terjemahan dengan ribuan permintaan unik.

Pendekatan yang Direkomendasikan:

Time: 00:01

Pembungkusan HTML Bersih

Pastikan teks dibungkus dalam tag tertentu (

, ,

) daripada mengambang bebas di . Ini membantu pengamat mengisolasi segmen.

Praktik Terbaik:

Your text here

Loose text

Hindari Efek "Mengetik"

Skrip yang "mengetik" teks karakter demi karakter (t... te... tex... teks) membingungkan mesin terjemahan. Render seluruh string teks sekaligus.

Tips Implementasi:

// Render complete text instead of character-by-character animation
<p>{fullText}</p>

4. Kasus Khusus: iFrame

Catatan tentang batasan lintas asal.

Jika konten dinamis Anda berada di dalam iFrame (misalnya, widget obrolan pihak ketiga atau gateway pembayaran):

Asal yang Sama:

Jika iFrame di-host di domain Anda, MultiLipi dapat menerjemahkannya.

Lintas Asal:

Jika iFrame dimuat dari domain eksternal (misalnya, Stripe, Intercom), kami tidak dapat menerjemahkannya karena kebijakan keamanan peramban (CORS).

Anda harus mengonfigurasi pengaturan terjemahan langsung di dalam alat pihak ketiga tersebut.

Ringkasan

Anda tidak perlu menginstal SDK khusus untuk React atau Angular. Setelah skrip MultiLipi aktif, ia secara otomatis terhubung ke mesin rendering peramban untuk menerjemahkan konten apa pun—statis atau dinamis—yang muncul di layar.

Cara Menerjemahkan Konten Dinamis dengan MultiLipi