La arquitectura web moderna rara vez se basa en HTML estático. El contenido se inyecta a través de JavaScript, se recupera a través de APIs o se renderiza en el lado del cliente utilizando frameworks como React o Vue. MultiLipi está diseñado para manejar esto "DOM Volátil". Nuestro script no solo traduce la página una vez al cargar; establece una conexión persistente MutationObserver para detectar y traducir nuevos nodos a medida que se inyectan en el árbol DOM.

Esta guía explica cómo nuestra infraestructura maneja cargas útiles dinámicas, solicitudes AJAX y estados interactivos.

1. El Desafío del Contenido "Volátil"

Los proxies de traducción estándar fallan cuando el contenido cambia después de la carga inicial.

MultiLipi soporta:

Renderizado en el Lado del Cliente (CSR)

Aplicaciones construidas sobre React, Vue, Angular o Svelte.

Peticiones Asíncronas

Contenido cargado a través de APIs AJAX/Fetch (por ejemplo, scroll infinito o resultados de búsqueda).

Estados Interactivos

Errores de validación de formularios, totales del carrito y notificaciones emergentes.

2. La Arquitectura de Ingeniería

Cómo traducimos sin romper tu aplicación.

Nuestro motor de JavaScript ejecuta un proceso de monitoreo continuo en el lado del cliente:

Observación del DOM:

MutationObserver

Utilizamos la API nativa MutationObserver del navegador para observar cambios en el .

Detección:

Cuando tu aplicación inyecta un nuevo

(por ejemplo, al abrir un modal), nuestro observador lo marca inmediatamente.

Inyección Instantánea:

< 50ms

El texto se envía a nuestra caché local o API. Si una traducción existe en la memoria, se intercambia instantáneamente (a menudo en menos de 50 ms), lo que parece perfecto para el usuario.

Preservación del estado:

solo nodos de texto

Solo modificamos nodos de texto. No destruimos elementos DOM ni eliminamos oyentes de eventos, lo que garantiza que sus enlaces de React/Vue permanezcan intactos.

3. Mejores Prácticas para Texto Dinámico

Para garantizar que MutationObserver funcione de manera eficiente, siga estas directrices arquitectónicas:

Nodos de Texto Estables

Evita cadenas que cambian cada segundo (como un temporizador: "00:01", "00:02"). Esto inunda el motor de traducción con miles de solicitudes únicas.

Enfoque Recomendado:

Hora: 00:01

Envoltura HTML Limpia

Asegúrate de que el texto esté envuelto en etiquetas específicas (

, ,

) en lugar de flotar libremente en el . Esto ayuda al observador a aislar el segmento.

Buenas prácticas:

Tu texto aquí

Texto suelto

Evite los efectos de "escritura"

Los scripts que "escriben" texto carácter por carácter (t... te... tex... texto) confunden a los motores de traducción. Renderice la cadena de texto completa a la vez.

Consejo de implementación:

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

4. Caso Límite: iFrames

Una nota sobre las limitaciones de origen cruzado.

Si tu contenido dinámico reside dentro de un iFrame (por ejemplo, un widget de chat de terceros o una pasarela de pago):

Mismo Origen:

Si el iFrame está alojado en tu dominio, MultiLipi puede traducirlo.

Origen Cruzado:

Si el iFrame carga desde un dominio externo (por ejemplo, Stripe, Intercom), nosotros no se puede traducir debido a las políticas de seguridad del navegador (CORS).

Debe configurar los ajustes de traducción directamente dentro de esa herramienta de terceros.

Resumen

No necesitas instalar SDKs específicos para React o Angular. Una vez que el script de MultiLipi está activo, este se engancha automáticamente al motor de renderizado del navegador para traducir cualquier contenido—estático o dinámico—que aparece en la pantalla.

Cómo traducir contenido dinámico con MultiLipi