\n\n \n ```\n\n \n \n ```svelte fileName=\"ProductCopy.svelte\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n \n\n {#if $content}\n

{$content.description}

\n {/if}\n ```\n\n \n \n ```tsx fileName=\"ProductCopy.tsx\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { useIntlayer } from \"preact-intlayer\";\n\n export const ProductCopy = ({\n productId,\n userId,\n }: {\n productId: string;\n userId: string;\n }) => {\n const content = useIntlayer(\"product-copy\", { id: productId, userId });\n // TypeScript garantiza que se proporcionen tanto `id` como `userId`.\n\n if (!content) return null;\n\n return

{content.description}

;\n };\n ```\n\n \n \n ```tsx fileName=\"ProductCopy.tsx\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { useIntlayer } from \"solid-intlayer\";\n\n export const ProductCopy = (props: {\n productId: string;\n userId: string;\n }) => {\n const content = useIntlayer(\"product-copy\", { id: props.productId, userId: props.userId });\n // TypeScript garantiza que se proporcionen tanto `id` como `userId`.\n\n return (\n <>\n {content() &&

{content().description}

}\n \n );\n };\n ```\n\n \n \n ```typescript fileName=\"product-copy.component.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { Component, Input, OnInit } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-product-copy\",\n template: `\n @if (content()) {\n

{{ content().description }}

\n }\n `,\n })\n export class ProductCopyComponent implements OnInit {\n @Input() productId!: string;\n @Input() userId!: string;\n\n content: any;\n\n ngOnInit() {\n this.content = useIntlayer(\"product-copy\", { id: this.productId, userId: this.userId });\n }\n }\n ```\n\n \n \n ```javascript fileName=\"product-copy.js\"\n import { useIntlayer } from \"vanilla-intlayer\";\n\n const content = useIntlayer(\"product-copy\", {\n id: \"prod_abcd\",\n userId: \"user_123\"\n });\n\n if (content) {\n document.body.innerHTML = `

${content.description}

`;\n }\n ```\n\n \n\n\n### Con configuración regional explícita\n\n```tsx\nconst content = useIntlayer(\"product-copy\", {\n id: \"prod_abc\",\n userId: \"user_123\",\n locale: \"es\",\n});\n```\n\n### Falta el campo meta — error en tiempo de compilación\n\n```ts\n// Error de tipo: falta `userId`\nconst content = useIntlayer(\"product-copy\", { id: \"prod_abc\" });\n```\n\n## Mode de carga (loading mode)\n\nLos registros dinámicos suelen cargarse de forma diferida. Establezca `importMode` en el diccionario para controlar esto:\n\n```ts contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nconst dictionary = {\n key: \"product-copy\",\n importMode: \"fetch\", // o \"dynamic\"\n meta: { id: \"prod_abc\", userId: \"user_123\" },\n content: { … },\n} satisfies Dictionary;\n\nexport default dictionary;\n```\n\nConsulte [optimización del bundle](/es/doc/concept/bundle-optimization) para obtener más detalles sobre los modos `static`, `dynamic` y `fetch`.\n\n## Casos de uso típicos\n\n- Copia de marketing por producto gestionada en un CMS\n- Contenido específico del usuario o de la cuenta\n- Cualquier contenido identificado por un ID de tiempo de ejecución opaco\n","description":"Utilice el campo meta en los archivos de contenido de Intlayer para declarar registros administrados por CMS obtenidos en tiempo de ejecución mediante un ID opaco, lo que permite contenido dinámico fuertemente tipado sin enumeración en tiempo de compilación.","url":"https://intlayer.org/es/doc/concept/dynamic-records","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"Registros Dinámicos, Contenido Dinámico, CMS, Contenido en Tiempo de Ejecución, Intlayer, Internacionalización","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Desarrolladores, Gestores de Contenido"}}

Autor:

Creación:2026-06-12Última actualización:2026-06-12

Referencia esta doc a tu asistente AI favoritoChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección

Historial de versiones

"Lanzamiento de la función de contenido dinámico"
v9.0.012/6/2026

El contenido de esta página ha sido traducido con una IA.

Ver la última versión del contenido original en inglés

Editar esta documentación

Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.

Enlace de GitHub a la documentación

Copiar

Copiar el Markdown del documento a la portapapeles

Registros Dinámicos

Un registro dinámico (dynamic record) es un archivo de contenido cuya identidad no es un índice secuencial o una variante nombrada, sino un conjunto arbitrario de pares clave-valor declarados en un campo meta. Intlayer utiliza esos campos como el selector en tiempo de ejecución, lo que permite direccionar registros de CMS, copias específicas del usuario o cualquier contenido cuyas claves no se conozcan en tiempo de compilación.

Declarar registros dinámicos

product-copy.abc.content.ts

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "product-copy",
  meta: {
    id: "prod_abc",
    userId: "user_123",
  },
  content: {
    name: t({ en: "Widget Pro", fr: "Widget Pro" }),
    description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
  },
} satisfies Dictionary;

export default dictionary;

product-copy.abcd.content.ts

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "product-copy",
  meta: {
    id: "prod_abcd",
    userId: "user_123",
  },
  content: {
    name: t({ en: "Widget Lite", fr: "Widget Lite" }),
    description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
  },
} satisfies Dictionary;

export default dictionary;

Consumir registros dinámicos

Todos los campos meta son obligatorios en el selector. Omitir cualquier campo devuelve null y es un error de TypeScript.

ProductCopy.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "react-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript garantiza que se proporcionen tanto `id` como `userId`.

  if (!content) return null;

  return <p>{content.description}</p>;
};

ProductCopy.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "next-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript garantiza que se proporcionen tanto `id` como `userId`.

  if (!content) return null;

  return <p>{content.description}</p>;
};

ProductCopy.vue

Copiar código

Copiar el código al portapapeles

<script setup>
import { useIntlayer } from "vue-intlayer";

const props = defineProps({
  productId: String,
  userId: String,
});

const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
</script>

<template>
  <p v-if="content">{{ content.description }}</p>
</template>

ProductCopy.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";

export let productId: string;
export let userId: string;

const content = useIntlayer("product-copy", { id: productId, userId });
</script>

{#if $content}
  <p>{$content.description}</p>
{/if}

ProductCopy.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "preact-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript garantiza que se proporcionen tanto `id` como `userId`.

  if (!content) return null;

  return <p>{content.description}</p>;
};

ProductCopy.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "solid-intlayer";

export const ProductCopy = (props: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
  // TypeScript garantiza que se proporcionen tanto `id` como `userId`.

  return (
    <>
      {content() && <p>{content().description}</p>}
    </>
  );
};

product-copy.component.ts

Copiar código

Copiar el código al portapapeles

import { Component, Input, OnInit } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-product-copy",
  template: `
    @if (content()) {
      <p>{{ content().description }}</p>
    }
  `,
})
export class ProductCopyComponent implements OnInit {
  @Input() productId!: string;
  @Input() userId!: string;

  content: any;

  ngOnInit() {
    this.content = useIntlayer("product-copy", { id: this.productId, userId: this.userId });
  }
}

product-copy.js

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product-copy", {  id: "prod_abcd",  userId: "user_123"});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

Con configuración regional explícita

tsx

Copiar código

Copiar el código al portapapeles

const content = useIntlayer("product-copy", {  id: "prod_abc",  userId: "user_123",  locale: "es",});

Falta el campo meta — error en tiempo de compilación

ts

Copiar código

Copiar el código al portapapeles

// Error de tipo: falta `userId`const content = useIntlayer("product-copy", { id: "prod_abc" });

Mode de carga (loading mode)

Los registros dinámicos suelen cargarse de forma diferida. Establezca importMode en el diccionario para controlar esto:

ts

Copiar código

Copiar el código al portapapeles

const dictionary = {
  key: "product-copy",
  importMode: "fetch", // o "dynamic"
  meta: { id: "prod_abc", userId: "user_123" },
  content: { … },
} satisfies Dictionary;

export default dictionary;

Consulte optimización del bundle para obtener más detalles sobre los modos static, dynamic y fetch.

Casos de uso típicos

Copia de marketing por producto gestionada en un CMS
Contenido específico del usuario o de la cuenta
Cualquier contenido identificado por un ID de tiempo de ejecución opaco

Variantes Archivo por locale