Arsitektur web modern jarang mengandalkan HTML statis. Konten disuntikkan melalui JavaScript, diambil melalui API, atau dirender sisi klien menggunakan kerangka kerja seperti Bereaksi atau Vue . MultiLipi direkayasa untuk menangani ini "DOM yang tidak stabil." Skrip kami tidak hanya menerjemahkan halaman setelah dimuat; itu menetapkan persisten Pengamat Mutasi untuk mendeteksi dan menerjemahkan node baru saat disuntikkan ke pohon DOM.
Panduan ini menjelaskan bagaimana infrastruktur kami menangani payload dinamis, permintaan AJAX, dan status interaktif .
1. Tantangan Konten "Volatile"
Proksi terjemahan standar gagal saat konten berubah setelah pemuatan awal.
MultiLipi mendukung:
Rendering Sisi Klien (CSR)
Aplikasi yang dibangun di React, Vue, Angular, atau Svelte.
Pengambilan Asinkron
Konten yang dimuat melalui AJAX/Fetch API (misalnya, scroll tak terbatas atau hasil penelusuran).
Negara Interaktif
Kesalahan validasi formulir, total keranjang, dan toast notifikasi.
2. Arsitektur Teknik
Cara kami menerjemahkan tanpa merusak aplikasi Anda.
Mesin JavaScript kami menjalankan Proses pemantauan berkelanjutan Di sisi klien:
Pengamatan DOM:
Pengamat Mutasi Kami menggunakan API MutationObserver asli browser untuk mengawasi perubahan dalam <body>.</body>
Deteksi:
<div>Saat aplikasi Anda menyuntikkan aplikasi baru <div> (misalnya, membuka modal), pengamat kita segera menandainya.</div>
Injeksi Instan:
< 50ms Teks dikirim ke cache atau API lokal kami. Jika terjemahan ada di memori, terjemahan itu langsung ditukar (seringkali dalam waktu kurang dari 50 milidetik), tampak mulus bagi pengguna.
Pelestarian Negara:
Hanya simpul teks Kami hanya memodifikasi simpul teks. Kami tidak menghancurkan elemen DOM atau mendaratkan pendengar acara, memastikan pengikatan React/Vue Anda tetap utuh.
3. Praktik Terbaik untuk Teks Dinamis
Untuk memastikan MutationObserver bekerja secara efisien, ikuti pedoman arsitektur berikut:
Node Teks 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 Disarankan:
<span>Waktu:</span> <span class="notranslate">00:01</span>
Pembungkus HTML Bersih
Pastikan teks dibungkus dalam tag tertentu (<p>, <span>, <div>) daripada mengambang longgar di <body>. Ini membantu pengamat mengisolasi segmen.</body></div></span>
Praktik Terbaik:
<p>Your text here</p> <!-- Good --> Loose text <!-- Bad -->
Hindari efek "mengetik"
Skrip yang "mengetik" teks karakter demi karakter (t... te... tex... teks) membingungkan mesin terjemahan. Render string teks lengkap sekaligus.
Tip Implementasi:
// Render complete text instead of character-by-character animation
<p>{fullText}</p>4. Kasus Tepi: iFrames
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 dihosting pada domain Anda , MultiLipi dapat menerjemahkannya .
Asal Silang:
Jika iFrame dimuat dari domain eksternal (misalnya, Stripe, Interkom), kami tidak dapat menerjemahkannya karena kebijakan keamanan browser (CORS).
Anda harus mengonfigurasi pengaturan terjemahan dalam alat pihak ketiga tersebut secara langsung.
Ringkasan
Anda tidak perlu menginstal SDK tertentu untuk React atau Angular. Setelah skrip MultiLipi aktif, itu secara otomatis terhubung ke mesin rendering browser untuk menerjemahkan konten apa pun— statis atau dinamis —yang muncul di layar.