Autor:

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

Referencia esta doc a tu asistente AI favorito

Google AI mode Gemini

Perplexity Mistral

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

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

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

Archivo por locale

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>`;}