Las soluciones de internacionalización se encuentran entre las dependencias más pesadas en una aplicación Solid. El riesgo principal es enviar contenido innecesario: traducciones para otras páginas y otros idiomas en el paquete de una sola ruta.

A medida que su aplicación crece, ese problema puede aumentar rápidamente el JavaScript enviado al cliente y ralentizar la navegación.

En la práctica, para las implementaciones menos optimizadas, una página internacionalizada puede terminar siendo varias veces más pesada que la versión sin i18n.

El otro impacto es en la experiencia del desarrollador (DX): cómo se declara el contenido, los tipos, la organización de los namespaces, la carga dinámica y la reactividad cuando cambia el idioma.

TL;DR

Intlayer: Opción recomendada para aplicaciones Solid profesionales que necesitan características avanzadas y optimización (v8.7.12).
@solid-primitives/i18n: Excelente alternativa ligera para proyectos simples, aunque carece de características avanzadas como la carga diferida (lazy loading).
solid-i18next: Opción estándar pero pesada (~4.7× Intlayer) con los mismos inconvenientes que React i18next.
Paraglide: Enfoque innovador pero DX compleja y problemas de tree-shaking en algunas configuraciones.

Pruebe su aplicación

Para detectar rápidamente problemas de fugas de i18n, he configurado un escáner gratuito disponible aquí.

intlayer.org

El problema

Dos palancas son esenciales para limitar el costo de una aplicación multilingüe:

Dividir el contenido por página / namespace para no cargar diccionarios completos cuando no se necesitan.
Cargar el idioma correcto dinámicamente, solo cuando sea necesario.

Comprender las limitaciones técnicas de estos enfoques:

Carga dinámica

Sin carga dinámica, la mayoría de las soluciones mantienen los mensajes en memoria desde el primer renderizado, lo que añade una sobrecarga significativa para aplicaciones con muchas rutas e idiomas.

Con la carga dinámica, se acepta un compromiso: menos JS inicial, pero a veces una solicitud adicional al cambiar de idioma.

División de contenido (Splitting)

Las sintaxis construidas en torno a t('a.b.c') son muy convenientes pero a menudo fomentan el mantenimiento de grandes objetos JSON en runtime. Ese modelo dificulta el tree-shaking a menos que la biblioteca ofrezca una estrategia real de división por página.

Metodología

Para este benchmark, comparamos las siguientes bibliotecas:

Base App (Sin biblioteca i18n)
solid-intlayer (v8.7.12)
@solid-primitives/i18n (v2.2.1)
solid-i18next (v17.0.2)
@inlang/paraglide-js (v2.17.0)

El framework es Solid con una aplicación multilingüe de 10 páginas y 10 idiomas.

Comparamos quatro estrategias de carga:

Mostrar todo el contenido de la tabla

Abrir la tabla en una ventana flotante para ver todo el contenido claramente

Estrategia	Sin namespaces (global)	Con namespaces (scoped)
Carga estática	Static: Todo en memoria al inicio.	Scoped static: Dividido por namespace; todo cargado al inicio.
Carga dinámica	Dynamic: Carga bajo demanda por idioma.	Scoped dynamic: Carga granular por namespace e idioma.

Resumen de estrategias

Static: Simple; sin latencia de red después de la carga inicial. Desventaja: gran tamaño del bundle.
Dynamic: Reduce el peso inicial (lazy-loading). Ideal cuando se tienen muchos idiomas.
Scoped static: Mantiene el código organizado (separación lógica) sin solicitudes de red adicionales complejas.
Scoped dynamic: El mejor enfoque para el code splitting y el rendimiento. Minimiza la memoria cargando solo lo que la vista actual y el idioma activo necesitan.

Estrellas de GitHub

Las estrellas de GitHub son un fuerte indicador de la popularidad de un proyecto, la confianza de la comunidad y la relevancia a largo plazo. Si bien no son una medida directa de la calidad técnica, reflejan cuántos desarrolladores encuentran útil el proyecto, siguen su progreso y es probable que lo adopten. Para estimar el valor de un proyecto, las estrellas ayudan a comparar la tracción entre alternativas y brindan información sobre el crecimiento del ecosistema.

Resultados detallados

1 - Soluciones a evitar

No hay una solución clara a evitar en el ecosistema de Solid.

2 - Soluciones aceptables

(solid-i18next) (solid-i18next@17.0.2):

solid-i18next es probablemente la opción más popular porque fue una de las primeras en satisfacer las necesidades de i18n de las aplicaciones de JavaScript. También cuenta con un amplio conjunto de complementos de la comunidad para problemas específicos.

El paquete es pesado (~14.6kb, aproximadamente 4.7 veces solid-intlayer).

Aun así, comparte las mismas desventajas principales que las pilas construidas sobre t('a.b.c'): las optimizaciones son posibles pero requieren mucho tiempo, y los proyectos grandes corren el riesgo de malas prácticas (namespaces + carga dinámica + tipos).

(@solid-primitives/i18n) (@solid-primitives/i18n@2.2.1):

Solid primitive es extremadamente ligero y eficiente. Recomiendo esa solución para proyectos ligeros, pero puede carecer rápidamente de características para soluciones profesionales que incluyan gestión de cookies, redirección de proxy, formateadores, etc. También carece de carga diferida (lazy loading) y segmentación de namespaces para la optimización del tamaño de la página.

(Paraglide) (@inlang/paraglide-js@2.17.0):

Paraglide ofrece un enfoque innovador y bien pensado. Aun así, en este benchmark, el tree-shaking que su empresa publicita no funcionó para mi implementación. El flujo de trabajo y la DX también son más complejos que en otras opciones. Personalmente, no me gusta tener que regenerar archivos JS antes de cada push, lo que genera un riesgo constante de conflictos de fusión a través de los PR. Finalmente, en comparación con otras soluciones, Paraglide no utiliza un almacén (ej. Solid signal) para recuperar el idioma actual para renderizar el contenido. Para cada nodo analizado, solicitará el idioma al localStorage / cookie, etc. Esto conduce a la ejecución de lógica innecesaria que impacta la reactividad del componente.

3 - Recomendaciones

(Intlayer) (solid-intlayer@8.7.12):

No juzgaré personalmente solid-intlayer por objetividad, ya que es mi propia solución.

Nota personal

Esta nota es personal y no afecta los resultados del benchmark. Aun así, en el mundo del i18n a menudo se ve consenso en torno a un patrón como const t = useTranslation('xx') + <>{t('xx.xx')}</> para el contenido traducido.

En las aplicaciones Solid, inyectar una función como un JSX.Element es, en mi opinión, un antipatrón. También añade complejidad evitable y sobrecarga de ejecución de JavaScript (aunque sea apenas perceptible).

Vue

Svelte