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 API 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 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 del Lado del Cliente (CSR)

Aplicaciones creadas en React, Vue, Angular o Svelte.

Obtenciones 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), apareciendo sin problemas 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, asegurando que tus enlaces de React/Vue permanezcan intactos.

3. Mejores Prácticas para Texto Dinámico

Para asegurar que el MutationObserver funcione eficientemente, sigue estas guías 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:

Tiempo: 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.

Mejor Práctica:

Tu texto aquí

Texto suelto

Evita 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. Renderiza la cadena de texto completa de una 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 vive 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 podemos traducirlo.

Origen cruzado:

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

Debes configurar los ajustes de traducción directamente en esa herramienta de terceros.

Resumen

No necesitas instalar SDK específicos para React o Angular. Una vez que el script de MultiLipi está activo, él se conecta 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