@intlayer/docs 8.11.1 → 8.11.3

package/docs/es/benchmark/tanstack.md

@@ -90,7 +90,7 @@ Con la carga dinámica, aceptas un compromiso: menos JS inicial, pero a veces un
 
 **División de contenido (Content splitting)**
 
-Las sintaxis basadas en `const t = useTranslation()` + `t('a.b.c')` son muy cómodas pero a menudo fomentan el mantenimiento de grandes objetos JSON en tiempo de ejecución. Ese modelo dificulta el tree-shaking a menos que la librería ofrezca una estrategia real de división por página.
+Las sintaxis basadas en `const t = useTranslation()` + `t('a.b.c')` son muy cómodas pero a menudo fomentan el mantenimiento de grandes objetos JSON en runtime. Ese modelo dificulta el tree-shaking a menos que la librería ofrezca una estrategia real de división por página.
 
 ## Metodología
 
@@ -170,7 +170,7 @@ La idea detrás de `Wuchale` es interesante pero todavía no es una solución vi
 
 **(Tolgee)** (`@tolgee/react@7.0.0`):
 
-`Tolgee` aborda muchos de los problemas mencionados anteriormente. Me resultó más difícil empezar con ella que con otras herramientas con enfoques similares. No proporciona seguridad de tipos, lo que también dificulta mucho detectar claves faltantes en tiempo de compilación. Tuve que envolver las API de Tolgee con las mías propias para añadir la detección de claves faltantes.
+`Tolgee` aborda muchos de los problemas mencionados anteriormente. Me resultó más difícil empezar con ella que con otras herramientas con enfoques similares. No proporciona seguridad de tipos, lo que también dificulta mucho detectar claves faltantes en tiempo de compilación (build time). Tuve que envolver las API de Tolgee con las mías propias para añadir la detección de claves faltantes.
 
 En TanStack Start también tuve problemas de reactividad: al cambiar de idioma, tuve que forzar el renderizado del proveedor y suscribirme a eventos de cambio de idioma para que la carga en otro idioma se comportara correctamente.
 

package/docs/es/benchmark/vue.md

@@ -2,7 +2,7 @@
 createdAt: 2026-04-20
 updatedAt: 2026-05-18
 title: La mejor solución i18n para Vue en 2026 - Informe de Benchmark
-description: Compara bibliotecas de internacionalización (i18n) para Vue como vue-i18n, fluent-vue e Intlayer. Informe de rendimiento detallado sobre el tamaño del paquete, fugas y reactividad.
+description: Compara bibliotecas de internacionalización (i18n) para Vue como vue-i18n, fluent-vue e Intlayer. Informe de rendimiento detallado sobre el tamaño del bundle, fugas y reactividad.
 keywords:
   - benchmark
   - i18n
@@ -89,7 +89,7 @@ Con la carga dinámica, se acepta un compromiso: menos JS inicial, pero a veces
 
 **División de contenido (Splitting)**
 
-Las sintaxis construidas en torno a `const { t } = useI18n()` + `t('a.b.c')` son muy convenientes pero a menudo fomentan el mantenimiento de grandes objetos JSON en tiempo de ejecución. Ese modelo dificulta el tree-shaking a menos que la biblioteca ofrezca una estrategia real de división por página.
+Las sintaxis construidas en torno a `const { t } = useI18n()` + `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
 
@@ -111,7 +111,7 @@ Comparamos **cuatro estrategias de carga**:
 
 ## Resumen de estrategias
 
-- **Static**: Simple; sin latencia de red después de la carga inicial. Desventaja: gran tamaño del paquete.
+- **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.

package/docs/es/bundle_optimization.md

@@ -27,7 +27,7 @@ Uno de los desafíos más comunes con las soluciones i18n tradicionales que depe
 
 Por ejemplo, una aplicación con 10 páginas traducidas a 10 idiomas podría resultar en que un usuario descargue el contenido de 100 páginas, aunque solo necesite **una** (la página actual en el idioma actual). Esto conduce a un desperdicio de ancho de banda y tiempos de carga más lentos.
 
-**Intlayer resuelve este problema a través de la optimización en tiempo de compilación.** Analiza su código para detectar qué diccionarios se usan realmente por componente y reinyecta solo el contenido necesario en su bundle.
+**Intlayer resuelve este problema a través de la optimización en tiempo de compilación (build time).** Analiza su código para detectar qué diccionarios se usan realmente por componente y reinyecta solo el contenido necesario en su bundle.
 
 ## Tabla de contenidos
 

package/docs/es/cli/index.md

@@ -156,7 +156,7 @@ Para ver cómo configurar los locales disponibles u otros parámetros, consulte
 ### Editor y Sincronización en vivo
 
 - **[Comandos del editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/editor.md)** - Use los comandos del editor de Intlayer
-- **[Comandos de sincronización en vivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/live.md)** - Use Live Sync para reflejar los cambios de contenido del CMS en tiempo de ejecución
+- **[Comandos de sincronización en vivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/live.md)** - Use Live Sync para reflejar los cambios de contenido del CMS en runtime
 
 ### CI/CD y Automatización
 

package/docs/es/cli/live.md

@@ -2,7 +2,7 @@
 createdAt: 2024-08-11
 updatedAt: 2025-11-22
 title: Comandos de Live Sync
-description: Aprende a usar Live Sync para reflejar cambios en el contenido del CMS en tiempo de ejecución.
+description: Aprende a usar Live Sync para reflejar cambios en el contenido del CMS en runtime.
 keywords:
   - Live Sync
   - CMS
@@ -18,7 +18,7 @@ slugs:
 
 # Comandos de Live Sync
 
-Live Sync permite que tu aplicación refleje los cambios en el contenido del CMS en tiempo de ejecución. No se requiere reconstrucción ni redeploy. Cuando está habilitado, las actualizaciones se transmiten a un servidor de Live Sync que actualiza los diccionarios que tu aplicación lee. Consulta [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md) para más detalles.
+Live Sync permite que tu aplicación refleje los cambios en el contenido del CMS en runtime. No se requiere reconstrucción ni redeploy. Cuando está habilitado, las actualizaciones se transmiten a un servidor de Live Sync que actualiza los diccionarios que tu aplicación lee. Consulta [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md) para más detalles.
 
 ```json fileName="package.json"
 "scripts": {

package/docs/es/compiler.md

@@ -51,7 +51,7 @@ Consulta el artículo del blog [Compiler vs. Declarative i18n](https://github.co
 Si bien el compilador ofrece una excelente experiencia de "funciona sin más", también introduce algunos compromisos de los que debes ser consciente:
 
 - **Ambigüedad heurística**: El compilador debe adivinar qué es contenido orientado al usuario frente a la lógica de la aplicación (por ejemplo, `className="active"`, códigos de estado, IDs de productos). En bases de código complejas, esto puede llevar a falsos positivos o cadenas omitidas que requieren anotaciones manuales y excepciones.
-- **Extracción solo estática**: La extracción basada en compilador se basa en análisis estático. Las cadenas que solo existen en tiempo de ejecución (códigos de error de API, campos CMS, etc.) no pueden ser descubiertas o traducidas por el compilador solo, por lo que aún necesitas una estrategia i18n de tiempo de ejecución complementaria.
+- **Extracción solo estática**: La extracción basada en compilador se basa en análisis estático. Las cadenas que solo existen en runtime (códigos de error de API, campos CMS, etc.) no pueden ser descubiertas o traducidas por el compilador solo, por lo que aún necesitas una estrategia i18n de tiempo de ejecución complementaria.
 
 Para una comparación arquitectónica más profunda, consulta el artículo del blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/compiler_vs_declarative_i18n.md).
 

package/docs/es/component_i18n.md

@@ -168,7 +168,7 @@ Consejo: Para metadatos de página y SEO, también puedes obtener contenido con
 ## Por qué el enfoque de componentes de Intlayer es el mejor
 
 - Colocación: Las declaraciones de contenido viven cerca de los componentes, reduciendo la deriva y mejorando la reutilización en los sistemas de diseño.
-- Seguridad de tipos: Las claves y estructuras están fuertemente tipadas; las traducciones faltantes aparecen en tiempo de build en lugar de en tiempo de ejecución.
+- Seguridad de tipos: Las claves y estructuras están fuertemente tipadas; las traducciones faltantes aparecen en tiempo de build en lugar de en runtime.
 - Server-first: Funciona de forma nativa en componentes de servidor para mejor seguridad y rendimiento; los hooks de cliente siguen siendo ergonómicos.
 - Tree-shaking: Solo se incluye el contenido usado por el componente, manteniendo cargas pequeñas en aplicaciones grandes.
 - DX y herramientas: Middleware incorporado, asistentes de SEO y traducciones opcionales mediante Editor Visual/IA agilizan el trabajo diario.

package/docs/es/custom_domains.md

@@ -2,7 +2,7 @@
 createdAt: 2026-04-02
 updatedAt: 2026-04-02
 title: Dominios personalizados
-description: Aprenda a configurar el enrutamiento de locales basado en dominios en Intlayer para servir diferentes locales desde nombres de host dedicados.
+description: Aprenda a configurar el enrutamiento por locales basado en dominios en Intlayer para servir diferentes locales desde nombres de host dedicados.
 keywords:
   - Dominios personalizados
   - Enrutamiento por dominio
@@ -16,12 +16,12 @@ slugs:
 history:
   - version: 8.5.0
     date: 2026-04-02
-    changes: "Se agregó el enrutamiento de locales basado en dominios a través de la configuración routing.domains."
+    changes: "Se agregó el enrutamiento por locales basado en dominios a través de la configuración routing.domains."
 ---
 
 # Dominios personalizados
 
-Intlayer admite el enrutamiento de locales basado en dominios, lo que le permite servir locales específicos desde nombres de host dedicados. Por ejemplo, los visitantes chinos pueden ser dirigidos a `intlayer.zh` en lugar de `intlayer.org/zh`.
+Intlayer admite el enrutamiento por locales basado en dominios, lo que le permite servir locales específicos desde nombres de host dedicados. Por ejemplo, los visitantes chinos pueden ser dirigidos a `intlayer.zh` en lugar de `intlayer.org/zh`.
 
 ## Cómo funciona
 

package/docs/es/dictionary/condition.md

@@ -22,7 +22,7 @@ slugs:
 
 ## Cómo Funciona la Condición
 
-En Intlayer, el contenido condicional se logra a través de la función `cond`, que asigna condiciones específicas (típicamente valores booleanos) a su contenido correspondiente. Este enfoque permite seleccionar dinámicamente el contenido basado en una condición dada. Cuando se integra con React Intlayer o Next Intlayer, el contenido apropiado se elige automáticamente según la condición proporcionada en tiempo de ejecución.
+En Intlayer, el contenido condicional se logra a través de la función `cond`, que asigna condiciones específicas (típicamente valores booleanos) a su contenido correspondiente. Este enfoque permite seleccionar dinámicamente el contenido basado en una condición dada. Cuando se integra con React Intlayer o Next Intlayer, el contenido apropiado se elige automáticamente según la condición proporcionada en runtime.
 
 ## Configuración de Contenido Condicional
 

package/docs/es/dictionary/content_file.md

@@ -239,7 +239,7 @@ Los nodos de contenido son los bloques de construcción del contenido del diccio
 
 - **Valores primitivos**: cadenas, números, booleanos, null, undefined
 - **Nodos tipados**: Tipos especiales de contenido como traducciones, condiciones, markdown, etc.
-- **Funciones**: Contenido dinámico que puede evaluarse en tiempo de ejecución [ver Obtención de Funciones](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/function_fetching.md)
+- **Funciones**: Contenido dinámico que puede evaluarse en runtime [ver Obtención de Funciones](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/function_fetching.md)
 - **Contenido Plural**: Ver Contenido Plural [Ver Contenido Plural](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/plural.md)
 - **Contenido anidado**: Referencias a otros diccionarios
 
@@ -502,8 +502,8 @@ Identificador de versión para diccionarios remotos. Ayuda a rastrear qué versi
 
 El modo de importación determina cómo se importa tu diccionario en tu aplicación.
 
-- `'static'`: El diccionario se importa estáticamente en tiempo de compilación. Este es el modo predeterminado.
-- `'dynamic'`: El diccionario se importa dinámicamente en tiempo de ejecución usando la API de suspense.
+- `'static'`: El diccionario se importa estáticamente en tiempo de compilación (build time). Este es el modo predeterminado.
+- `'dynamic'`: El diccionario se importa dinámicamente en runtime usando la API de suspense.
 - `'fetch'`: El diccionario se importa dinámicamente usando la API de sincronización en vivo.
 
 Si se establece, esta propiedad anula el `importMode` global definido en `la propiedad `dictionary`de`intlayer.config.ts``.
@@ -1055,4 +1055,4 @@ export default {
 3. **Rendimiento**:
    - Ajusta la configuración del contenido para limitar el alcance de los archivos observados
    - Usa diccionarios en vivo solo cuando sean necesarias actualizaciones en tiempo real (por ejemplo, pruebas A/B, etc.)
-   - Asegúrate de que el plugin de transformación de compilación (`@intlayer/swc` o `@intlayer/babel`) esté habilitado para optimizar el diccionario en tiempo de compilación
+   - Asegúrate de que el plugin de transformación de compilación (`@intlayer/swc` o `@intlayer/babel`) esté habilitado para optimizar el diccionario en tiempo de compilación (build time)

package/docs/es/dictionary/gender.md

@@ -26,7 +26,7 @@ history:
 
 ## Cómo Funciona el Género
 
-En Intlayer, el contenido basado en género se logra mediante la función `gender`, que asigna valores específicos de género ('male', 'female') a su contenido correspondiente. Este enfoque te permite seleccionar dinámicamente el contenido según un género dado. Cuando se integra con React Intlayer o Next Intlayer, el contenido apropiado se selecciona automáticamente según el género proporcionado en tiempo de ejecución.
+En Intlayer, el contenido basado en género se logra mediante la función `gender`, que asigna valores específicos de género ('male', 'female') a su contenido correspondiente. Este enfoque te permite seleccionar dinámicamente el contenido según un género dado. Cuando se integra con React Intlayer o Next Intlayer, el contenido apropiado se selecciona automáticamente según el género proporcionado en runtime.
 
 ## Configuración de Contenido Basado en Género
 

package/docs/es/dictionary/html.md

@@ -35,7 +35,7 @@ history:
 
 # Contenido HTML / HTML en Intlayer
 
-Intlayer admite contenido HTML, lo que permite incrustar contenido enriquecido y estructurado dentro de los diccionarios. Este contenido se puede renderizar con etiquetas HTML estándar o reemplazarse por componentes personalizados en tiempo de ejecución.
+Intlayer admite contenido HTML, lo que permite incrustar contenido enriquecido y estructurado dentro de los diccionarios. Este contenido se puede renderizar con etiquetas HTML estándar o reemplazarse por componentes personalizados en runtime.
 
 ## Declarar contenido HTML
 
@@ -277,7 +277,7 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
     );
     ```
 
-    > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
   <Tab label="Vue" value="vue">
@@ -322,7 +322,7 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
     app.mount("#app");
     ```
 
-    > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
   <Tab label="Svelte" value="svelte">
@@ -359,7 +359,7 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
     </HTMLProvider>
     ```
 
-    > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
   <Tab label="Preact" value="preact">
@@ -395,7 +395,7 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
     );
     ```
 
-    > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
   <Tab label="Solid" value="solid">
@@ -431,7 +431,7 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
     );
     ```
 
-    > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
   <Tab label="Angular" value="angular">
@@ -468,7 +468,7 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
     };
     ```
 
-    > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
 </Tabs>

package/docs/es/dictionary/insertion.md

@@ -29,7 +29,7 @@ history:
 
 ## Cómo Funciona la Inserción
 
-En Intlayer, el contenido de inserción se logra mediante la función `insertion`, que identifica campos de marcador de posición en una cadena (como `{{name}}` o `{{age}}`) que pueden ser reemplazados dinámicamente en tiempo de ejecución. Este enfoque te permite crear cadenas flexibles, similares a plantillas, donde partes específicas del contenido se determinan por los datos proporcionados desde tu aplicación.
+En Intlayer, el contenido de inserción se logra mediante la función `insertion`, que identifica campos de marcador de posición en una cadena (como `{{name}}` o `{{age}}`) que pueden ser reemplazados dinámicamente en runtime. Este enfoque te permite crear cadenas flexibles, similares a plantillas, donde partes específicas del contenido se determinan por los datos proporcionados desde tu aplicación.
 
 Cuando se integra con React Intlayer o Next Intlayer, simplemente puedes proporcionar el objeto de datos que contiene los valores para cada marcador de posición, y Intlayer renderizará automáticamente el contenido con los marcadores reemplazados.
 

package/docs/es/dictionary/markdown.md

@@ -17,6 +17,9 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.11.0
+    date: 2026-05-28
+    changes: "Permitir el preanálisis del AST de Markdown para SSR / hidratación"
   - version: 8.10.0
     date: 2026-05-19
     changes: "Se agregó soporte para archivos `.content.md`"
@@ -737,7 +740,7 @@ Estas utilidades renderizan **únicamente cadenas Markdown puras** y son indepen
     );
     ```
 
-    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
@@ -779,7 +782,7 @@ Estas utilidades renderizan **únicamente cadenas Markdown puras** y son indepen
     );
     ```
 
-    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
   <Tab label="Vue" value="vue">
@@ -830,7 +833,7 @@ Estas utilidades renderizan **únicamente cadenas Markdown puras** y son indepen
     app.mount("#app");
     ```
 
-    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
   <Tab label="Svelte" value="svelte">
@@ -870,7 +873,7 @@ Estas utilidades renderizan **únicamente cadenas Markdown puras** y son indepen
     </MarkdownProvider>
     ```
 
-    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
   <Tab label="Preact" value="preact">
@@ -909,7 +912,7 @@ Estas utilidades renderizan **únicamente cadenas Markdown puras** y son indepen
     );
     ```
 
-    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
   <Tab label="Solid" value="solid">
@@ -948,7 +951,7 @@ Estas utilidades renderizan **únicamente cadenas Markdown puras** y son indepen
     );
     ```
 
-    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
   <Tab label="Angular" value="angular">
@@ -970,7 +973,7 @@ Estas utilidades renderizan **únicamente cadenas Markdown puras** y son indepen
     export class AppModule {}
     ```
 
-    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del paquete de su aplicación.
+    > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
 </Tabs>
@@ -1149,6 +1152,164 @@ export class MyComponent {
 
 ---
 
+## Renderizado en el Lado del Servidor (SSR) e Hidratación
+
+En comparación con otros analizadores de Markdown como remark / rehype, Intlayer Markdown no tiene dependencias y se ejecuta tanto en el cliente como en el servidor.
+
+Sin embargo, Intlayer optimiza el análisis para frameworks de renderizado en el lado del servidor (SSR) (como Next.js App Router, React Router, Nuxt, SvelteKit, etc.).
+
+En lugar de enviar cadenas Markdown crudas al cliente y analizarlas en el navegador (lo que incurre en una penalización de rendimiento), Intlayer le permite preanalizar el Markdown en un Árbol de Sintaxis Abstracta (AST) en el servidor.
+
+Puede usar la función `parseMarkdown` del paquete Intlayer de su framework en el lado del servidor para generar un AST serializable (objeto `ParsedMarkdown`) y pasarlo directamente al frontend. Todas las utilidades de renderizado de Intlayer (como `<MarkdownRenderer>`, `useMarkdownRenderer`, etc.) aceptan automáticamente este objeto AST y lo renderizan sin problemas.
+
+### Ejemplo en una Arquitectura Servidor/Cliente
+
+<Tabs group="framework">
+  <Tab label="React Router" value="react">
+
+    ```tsx fileName="server.ts"
+    import { parseMarkdown } from "react-intlayer/markdown";
+
+    // 1. En el servidor: Analizar el markdown en un AST serializable
+    export const loader = async () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // Devolver el AST como JSON al cliente
+      return Response.json({ content: ast });
+    };
+    ```
+
+    ```tsx fileName="client.tsx"
+    import { useLoaderData } from "react-router";
+    import { MarkdownRenderer } from "react-intlayer/markdown";
+
+    // 2. En el cliente: Renderizar el AST directamente sin volver a analizar
+    export default function Page() {
+      const { content } = useLoaderData();
+
+      // El renderizador acepta tanto una cadena cruda como el AST analizado
+      return <MarkdownRenderer content={content} />;
+    }
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    ```tsx fileName="app/page.tsx"
+    import { parseMarkdown } from "next-intlayer/markdown";
+    import { MarkdownRenderer } from "next-intlayer/markdown";
+
+    export default async function Page() {
+      // 1. Analizar el markdown en un AST serializable en el servidor
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // 2. Renderizar el AST directamente
+      // En un Componente de Servidor, esto funciona sin problemas y pasa el AST
+    // directamente a los componentes de cliente subyacentes si es necesario.
+      return <MarkdownRenderer content={ast} />;
+    }
+    ```
+
+  </Tab>
+  <Tab label="Vue / Nuxt" value="vue">
+
+    ```vue fileName="pages/index.vue"
+    <script setup lang="ts">
+    import { parseMarkdown } from "vue-intlayer/markdown";
+    import { MarkdownRenderer } from "vue-intlayer/markdown";
+
+    // 1. Obtener y analizar el markdown en un AST en el servidor
+    const { data: ast } = await useAsyncData('markdown', () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      return parseMarkdown(markdownString);
+    });
+    </script>
+
+    <template>
+      <!-- 2. En el cliente: Renderizar el AST directamente sin volver a analizar -->
+      <MarkdownRenderer :content="ast" />
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="SvelteKit" value="svelte">
+
+    ```typescript fileName="+page.server.ts"
+    import { parseMarkdown } from "svelte-intlayer/markdown";
+
+    // 1. En el servidor: Analizar el markdown en un AST serializable
+    export const load = async () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // Devolver el AST al cliente
+      return { content: ast };
+    };
+    ```
+
+    ```svelte fileName="+page.svelte"
+    <script lang="ts">
+      import { MarkdownRenderer } from "svelte-intlayer/markdown";
+      export let data;
+    </script>
+
+    <!-- 2. En el cliente: Renderizar el AST directamente sin volver a analizar -->
+    <MarkdownRenderer value={data.content} />
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    El SSR de Angular normalmente resuelve los datos en el servidor durante la carga inicial y se hidrata en el cliente. Puede usar solucionadores para pasar el AST.
+
+    ```typescript fileName="app.resolver.ts"
+    import { Injectable } from "@angular/core";
+    import { Resolve } from "@angular/router";
+    import { parseMarkdown, type ParsedMarkdown } from "angular-intlayer/markdown";
+
+    @Injectable({ providedIn: "root" })
+    export class MarkdownResolver implements Resolve<ParsedMarkdown> {
+      resolve(): ParsedMarkdown {
+        const markdownString = "## My title \n\nLorem Ipsum";
+        // 1. En el servidor: Analizar el markdown en un AST serializable
+        return parseMarkdown(markdownString);
+      }
+    }
+    ```
+
+    ```typescript fileName="app.component.ts"
+    import { Component } from "@angular/core";
+    import { ActivatedRoute } from "@angular/router";
+    import { IntlayerMarkdownService, type ParsedMarkdown } from "angular-intlayer/markdown";
+
+    @Component({
+      selector: "app-root",
+      template: `<div [innerHTML]="renderedMarkdown"></div>`,
+    })
+    export class AppComponent {
+      renderedMarkdown: string = "";
+
+      constructor(
+        private route: ActivatedRoute,
+        private markdownService: IntlayerMarkdownService
+      ) {
+        // 2. En el cliente: Renderizar el AST directamente sin volver a analizar
+        this.route.data.subscribe((data) => {
+          this.renderedMarkdown = this.markdownService.renderMarkdown(
+            data.markdownAst
+          ) as string;
+        });
+      }
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+Este patrón garantiza que la lógica de análisis de Markdown se ejecute completamente en el servidor, lo que reduce significativamente el tiempo de ejecución en el cliente y mejora la velocidad de hidratación inicial.
+
 ## Referencia de opciones
 
 Estas opciones se pueden pasar a `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` y `renderMarkdown`.

package/docs/es/dictionary/plurial.md

@@ -97,7 +97,7 @@ export default openingsContent;
 
 > Las categorías admitidas son `zero`, `one`, `two`, `few`, `many`, `other`. Solo necesitas declarar las categorías que utiliza tu idioma de destino; Intlayer recurre a `other` cuando no coincide ninguna categoría específica.
 >
-> El marcador de posición `{{count}}` se reemplaza automáticamente con el conteo que pases en tiempo de ejecución. También puedes incluir otros marcadores de posición (consulta [Marcadores de posición personalizados](#custom-placeholders) a continuación).
+> El marcador de posición `{{count}}` se reemplaza automáticamente con el conteo que pases en runtime. También puedes incluir otros marcadores de posición (consulta [Marcadores de posición personalizados](#custom-placeholders) a continuación).
 
 ## Uso de contenido en plural con React Intlayer
 

package/docs/es/how_works_intlayer.md

@@ -101,8 +101,8 @@ Intlayer también proporciona un editor visual para permitirte editar tu conteni
 
 ## Optimización de la construcción de la aplicación
 
-Para optimizar el tamaño del paquete de tu aplicación, Intlayer proporciona dos plugins para optimizar la construcción de tu aplicación: los plugins `@intlayer/babel` y `@intlayer/swc`.
-Los plugins de Babel y SWC funcionan analizando el Árbol de Sintaxis Abstracta (AST) de tu aplicación para reemplazar las llamadas a las funciones de Intlayer con código optimizado. Este proceso hace que tu paquete final sea más ligero en producción al asegurar que solo se importen los diccionarios que realmente se usan, optimizando la división en fragmentos y reduciendo el tamaño del paquete.
+Para optimizar el tamaño del bundle de tu aplicación, Intlayer proporciona dos plugins para optimizar la construcción de tu aplicación: los plugins `@intlayer/babel` y `@intlayer/swc`.
+Los plugins de Babel y SWC funcionan analizando el Árbol de Sintaxis Abstracta (AST) de tu aplicación para reemplazar las llamadas a las funciones de Intlayer con código optimizado. Este proceso hace que tu paquete final sea más ligero en producción al asegurar que solo se importen los diccionarios que realmente se usan, optimizando la división en fragmentos y reduciendo el tamaño del bundle.
 
 En modo de desarrollo, Intlayer utiliza una importación estática centralizada para los diccionarios para simplificar la experiencia de desarrollo.