Svelte i18n frente a traducción automática: ¿cuál deberías usar?
SvelteKit no tiene i18n integrada más allá del enrutamiento básico de URL. Las dos opciones principales son una librería de extracción de cadenas —svelte-i18n o Paraglide-JS— o la traducción automática a nivel del DOM. La elección correcta depende del calendario de tu proyecto, el tamaño del equipo y el ritmo de actualización del contenido.
El enfoque de extracción de cadenas: svelte-i18n y Paraglide-JS
svelte-i18n es la librería de i18n más usada en el ecosistema Svelte. Funciona con un modelo de archivo de mensajes familiar: almacenas las traducciones en archivos JSON indexados por locale, y luego haces referencia a las cadenas en las plantillas usando la sintaxis $_() respaldada por un store reactivo de Svelte.
// src/lib/i18n.js
import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n'
import en from './locales/en.json'
import fr from './locales/fr.json'
addMessages('en', en)
addMessages('fr', fr)
init({ fallbackLocale: 'en', initialLocale: getLocaleFromNavigator() })
En las plantillas de Svelte, importas el store $_ y lo llamas como una función:
<script>
import { _ } from 'svelte-i18n'
</script>
<h1>{$_('home.title')}</h1>
<p>{$_('home.description')}</p>
Paraglide-JS de inlang adopta un enfoque diferente: es de tiempo de compilación, con tipado seguro, y genera funciones de mensaje completamente tipadas a partir de tus archivos de locale en tiempo de compilación. Esto significa que obtienes autocompletado en el IDE para cada clave de traducción y un error de compilación si haces referencia a una clave que no existe. Es más reciente, pero está ganando tracción rápidamente en la comunidad de SvelteKit como alternativa para equipos que quieren garantías más sólidas.
Ambas librerías comparten el mismo flujo de trabajo fundamental: extraer cada cadena de tus componentes a archivos JSON de locale, mantener un archivo por idioma, actualizar esos archivos cada vez que cambia el texto, y gestionar plurales e interpolación explícitamente en la sintaxis de mensajes. Para una app de SvelteKit de tamaño mediano, la configuración inicial suele tardar de uno a tres días, y eso es antes de rellenar las traducciones en sí.
El enfoque de traducción automática
La alternativa consiste en operar a nivel del DOM en lugar de a nivel del componente. Añades una etiqueta de script en src/app.html antes de </body>, y Lingvit se encarga del resto:
<!-- src/app.html -->
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
<script src="https://cdn.lingvit.com/widget.bundle.js"
data-project-id="YOUR_PROJECT_ID"></script>
</body>
El MutationObserver de Lingvit vigila los cambios del DOM y traduce los nodos de texto a medida que aparecen. Esto cubre toda la gama del modelo de reactividad de SvelteKit:
- →Transiciones de ruta. La navegación del lado del cliente de SvelteKit reemplaza el cuerpo de la página en el DOM. El MutationObserver detecta el nuevo contenido de inmediato y lo traduce antes de que el usuario lo vea.
- →Actualizaciones reactivas de stores. Cuando un store de Svelte cambia y provoca una actualización del DOM —un contador, una lista obtenida, un bloque condicional— los nuevos nodos se traducen automáticamente.
- →Valores
$derived. La reactividad basada en runes de Svelte 5 sigue escribiendo en el DOM. Lingvit observa las mutaciones resultantes; la primitiva reactiva es irrelevante. - →Sin extracción de cadenas, sin archivos de locale. El contenido nuevo se traduce en el momento en que aparece en el DOM. No hay nada que actualizar en el control de versiones cuando cambia el texto.
Las revisiones editoriales están disponibles desde el panel cuando quieres una traducción revisada por humanos para una cadena específica sin tocar código.
Cómo se comparan
Los dos enfoques difieren en cada dimensión que importa en la práctica:
Tiempo de configuración
Añadir svelte-i18n o Paraglide-JS a una app de SvelteKit existente significa tocar cada componente que renderiza texto: reemplazando cadenas literales con llamadas $_('key') y construyendo archivos de locale. Para una app de tamaño mediano, esto supone un esfuerzo de varios días. Añadir Lingvit usa una única etiqueta de script y un flujo de configuración guiado; el tiempo real de configuración varía según la app.
Mantenimiento continuo
Con la extracción de cadenas, cada cambio de texto significa actualizar cada archivo de locale. Si te saltas uno, un idioma vuelve silenciosamente al inglés. La traducción automática tiene cero mantenimiento continuo: las cadenas nuevas se gestionan en el primer renderizado sin ninguna acción del desarrollador.
Experiencia de desarrollo
Paraglide-JS te da claves de traducción con tipado seguro y autocompletado en el IDE: una DX genuinamente buena si estás construyendo un producto donde cada cadena está planificada. Para sitios de marketing o interfaces de SaaS que cambian rápidamente, reemplazar cadenas literales con llamadas a función en todas partes es una fricción que ralentiza la iteración. Lingvit no requiere ningún cambio en los componentes de Svelte.
SEO
Ambos enfoques pueden dar soporte a URL de locale amigables para SEO (/fr/, /de/). Lingvit gestiona el contenido renderizado dinámicamente de forma automática: el texto traducido que SvelteKit inserta mediante navegación del lado del cliente o datos asíncronos se capta sin configuración adicional.
Control
La extracción de cadenas ofrece control por clave: cada traducción es una decisión explícita almacenada en el control de versiones. La traducción automática ofrece revisión a nivel de panel: puedes inspeccionar y sustituir cadenas individuales a través de la interfaz de Lingvit sin tocar código. El nivel de control que necesitas depende del perfil de riesgo de tu contenido.
Cuándo elegir svelte-i18n o Paraglide-JS
Necesitas seguridad de tipos en tiempo de compilación
Paraglide-JS genera funciones de mensaje tipadas a partir de tus archivos de locale. Si tu equipo valora detectar claves de traducción faltantes en tiempo de compilación y quiere autocompletado en el IDE para cada clave, el enfoque de tiempo de compilación es una ganancia genuina de productividad, especialmente en equipos más grandes donde varios desarrolladores tocan el texto.
Tus traductores trabajan con archivos de locale
Si tienes un flujo de traducción establecido —traductores que usan Crowdin, Weblate, o un TMS que se integra con archivos JSON de locale— svelte-i18n encaja de forma natural. El formato JSON de locale es una lingua franca para las herramientas profesionales de traducción.
Cada cadena debe revisarse antes de salir en vivo
Las aplicaciones legales, médicas o gubernamentales suelen requerir la aprobación explícita de cada cadena traducida antes de que llegue a producción. La extracción de cadenas te da ese registro de auditoría explícito por clave: una traducción solo se publica cuando un humano ha aprobado la entrada del archivo de locale.
Tienes tiempo de ingeniería de i18n dedicado
Mantener los archivos de locale con precisión en varios idiomas a medida que el producto evoluciona requiere atención de ingeniería continua. Si tienes a alguien cuyo trabajo incluye mantener las traducciones al día, la sobrecarga es manejable. Sin esa persona, los archivos de locale tienden a quedarse rezagados respecto al producto.
Cuándo elegir la traducción automática
Necesitas soporte multilingüe hoy
Retroadaptar svelte-i18n a una aplicación de SvelteKit existente significa tocar cada componente que renderiza texto. Un widget de traducción basado en el DOM requiere un único cambio de etiqueta de script: sin reescribir componentes, sin bootstrapping de archivos de locale, sin cambios en el pipeline de compilación.
Tu contenido se actualiza con frecuencia
Los blogs, sitios de marketing y interfaces de SaaS que cambian semanalmente están mal servidos por la extracción de cadenas: cada cambio de contenido significa actualizar cada archivo de locale, o aceptar que algunos idiomas muestren texto obsoleto. La traducción automática gestiona el contenido nuevo en el primer renderizado sin ninguna acción del desarrollador.
No tienes recursos de i18n dedicados
La mayoría de los equipos de producto no tienen un ingeniero de i18n. Sin uno, los archivos de locale acumulan deuda rápidamente: claves faltantes, cadenas obsoletas, marcadores de posición sin traducir. La traducción automática elimina por completo la carga de mantenimiento: la capa de traducción se mantiene al día por sí misma a medida que cambia el DOM.
Estás añadiendo idiomas a una app de SvelteKit existente
Si tu app ya existe y estás añadiendo soporte multilingüe como un nuevo requisito, el coste de retroadaptar la extracción de cadenas es proporcional al número de componentes que ya has escrito. Lingvit no requiere ningún cambio en los componentes de Svelte existentes: añade la etiqueta de script y configura los idiomas en el panel.
Preguntas frecuentes
- ¿Funciona la traducción automática con el enrutamiento basado en archivos de SvelteKit?
- Sí. La navegación del lado del cliente de SvelteKit reemplaza el contenido de la página en el DOM, lo que el MutationObserver de Lingvit detecta de inmediato. Cada cambio de ruta activa una nueva pasada de traducción sobre el contenido nuevo.
- ¿Puedo usar svelte-i18n para el enrutamiento de URL y la traducción automática para el contenido?
- Sí. Los dos enfoques operan en capas diferentes. Puedes usar svelte-i18n o Paraglide-JS únicamente para el enrutamiento de URL sensible al locale (/fr/, /de/) mientras Lingvit gestiona toda la traducción del contenido de texto.
- ¿Gestiona el contenido derivado de stores de Svelte?
- Sí. Cuando una actualización de un store de Svelte provoca mutaciones reactivas del DOM, Lingvit observa los cambios del DOM resultantes y traduce los nuevos nodos de texto.
- ¿Cómo gestiona la traducción automática los plurales y los valores interpolados?
- Lingvit traduce la cadena renderizada final, después de que Svelte haya interpolado las variables y resuelto los plurales. No necesitas escribir claves de traducción para cadenas dinámicas; el texto completamente renderizado es lo que se traduce.
Guías relacionadas
Añade idiomas a tu app de SvelteKit
Funciona con SvelteKit, runes de Svelte 5 y stores reactivos. Una etiqueta de script, sin reescribir componentes.