Single Page Applications (SPAs) built with React, Vue, Next.js, and Svelte render content dynamically in the browser. When a user navigates tabs, filters catalog listings, or triggers an AJAX pagination request, new DOM elements enter the page without a full browser reload.
Traditional translation tools fail on SPAs because they only scan the DOM once during the initial DOMContentLoaded event. Any content injected dynamically afterwards remains untranslated in English.
The solution: MutationObserver with debounced micro-tasks
The TranslateBeam TDN client embed script (tdn.js) uses the browser's native MutationObserver API to track DOM changes in real time with minimal main-thread overhead.
How the dynamic pipeline functions
- Targeted observation: When language switching is active, the engine attaches a lightweight observer to
document.body, monitoring exclusively forchildListadditions. - Filtering: The observer ignores script tags, stylesheets, SVG nodes, and elements marked
translate="no"orclass="notranslate". - Debounced batching: When a component renders 50 items at once, the observer groups all new text nodes into a single batched translation request using a 300ms debounce window.
- Cache lookup: If a text node has been previously translated, it updates immediately from the client-side Map cache without a network round trip.
This approach ensures dynamic modals, interactive tabs, live trading charts, and slide-out carts translate smoothly without layout flickering or UI lag.
