L'architecture web moderne repose rarement sur du HTML statique. Le contenu est injecté via JavaScript, récupéré via des API ou rendu côté client à l'aide de frameworks tels que React ou Vue. MultiLipi est conçu pour gérer ce DOM volatil. Notre script ne se contente pas de traduire la page une fois au chargement ; il établit une connexion persistante MutationObserver pour détecter et traduire les nouveaux nœuds au fur et à mesure de leur injection dans l'arbre DOM.

Ce guide explique comment notre infrastructure gère les charges utiles dynamiques, les requêtes AJAX et les états interactifs.

1. Le défi du contenu "volatil"

Les proxys de traduction standard échouent lorsque le contenu change après le chargement initial.

MultiLipi prend en charge :

Rendu côté client (CSR)

Les applications construites sur React, Vue, Angular ou Svelte.

Les récupérations asynchrones

Le contenu chargé via les API AJAX/Fetch (par exemple, défilement infini ou résultats de recherche).

Les états interactifs

Les erreurs de validation de formulaire, les totaux du panier et les notifications toast.

2. L'architecture d'ingénierie

Comment nous traduisons sans casser votre application.

Notre moteur JavaScript exécute un processus de surveillance continue côté client :

Observation du DOM :

MutationObserver

Nous utilisons l'API native MutationObserver du navigateur pour surveiller les modifications dans le .

Détection :

Lorsque votre application injecte un nouveau

(par exemple, en ouvrant une modale), notre observateur le signale immédiatement.

Injection instantanée :

< 50ms

Le texte est envoyé à notre cache local ou à notre API. Si une traduction existe en mémoire, elle est échangée instantanément (souvent en moins de 50 ms), apparaissant de manière transparente pour l'utilisateur.

Préservation de l'état :

nœuds de texte uniquement

Nous ne modifions que les nœuds de texte. Nous ne détruisons pas les éléments DOM et ne supprimons pas les écouteurs d'événements, garantissant ainsi que vos liaisons React/Vue restent intactes.

3. Bonnes pratiques pour le texte dynamique

Pour garantir l'efficacité du MutationObserver, suivez ces directives architecturales :

Nœuds de texte stables

Évitez les chaînes de caractères qui changent chaque seconde (comme un compte à rebours : "00:01", "00:02"). Cela inonde le moteur de traduction de milliers de requêtes uniques.

Approche recommandée :

Heure : 00:01

Enveloppement HTML propre

Assurez-vous que le texte est encapsulé dans des balises spécifiques (

, ,

) plutôt que d'être flottant dans le . Cela aide l'observateur à isoler le segment.

Meilleure pratique :

Votre texte ici

Texte libre

Évitez les effets de « saisie »

Les scripts qui « tapent » le texte caractère par caractère (t... te... tex... texte) confondent les moteurs de traduction. Affichez la chaîne de texte complète en une seule fois.

Astuce d'implémentation :

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

4. Cas particulier : iFrames

Une note sur les limitations inter-origines.

Si votre contenu dynamique se trouve à l'intérieur d'un iFrame (par exemple, un widget de chat tiers ou une passerelle de paiement) :

Même origine :

Si l'iFrame est hébergé sur votre domaine, MultiLipi peut le traduire.

Origine différente :

Si l'iFrame se charge à partir d'un domaine externe (par exemple, Stripe, Intercom), nous ne pouvons pas le traduire en raison des politiques de sécurité du navigateur (CORS).

Vous devez configurer les paramètres de traduction directement dans cet outil tiers.

Résumé

Vous n'avez pas besoin d'installer de SDK spécifiques pour React ou Angular. Une fois le script MultiLipi actif, il s'intègre automatiquement au moteur de rendu du navigateur pour traduire tout contenu —statique ou dynamique—qui apparaît à l'écran.

Comment traduire le contenu dynamique avec MultiLipi