Motor Renderizador de Bloques Modulares (Block Renderer Engine)

1. Funcionamiento del BlockRenderer en Next.js 16

El motor se basa en un mapa dinámico de componentes que relaciona cada tipo de bloque con su variante de diseño y transfiere las propiedades (Props) de forma tipada.

1. La matriz de bloques dynamic_zone se obtiene de la consulta GraphQL o REST de Strapi.
2. La propiedad __component se asigna al tipo de bloque (ej. blocks.hero-section).
3. Se lee la variante visual seleccionada en el panel de administración (style-1, style-2, style-3).
4. El componente React correspondiente se carga e interactúa con las traducciones del idioma actual.
5. El resultado se almacena con etiquetas de caché de Next.js para una entrega ultrarrápida.

import React from "react"
import { ProductShowcaseProps } from "../types"
 
export default function ProductShowcaseStyle3({ block, products }: ProductShowcaseProps) {
  return (
    <section className="py-12 bg-gradient-to-r from-gray-900 to-black text-gray-900 dark:text-white">
      <h2 className="text-xl font-bold mb-6">{block.title}</h2>
    </section>
  )
}

2. Mapa de Tipos de Componentes y Propiedades

Definición estricta de interfaces TypeScript para cada bloque (Hero, Vitrina de Productos, Características, Banners) evitando errores en tiempo de ejecución.

1. Crea el nuevo componente HeroStyle4.tsx en src/components/blocks/hero.
2. Añade y exporta el componente en el mapa de estilos del archivo index.ts del bloque.
3. Añade la opción style-4 en el campo de estilo del bloque dentro del panel de Strapi.
4. Publica la página en Strapi para ver el nuevo diseño en vivo al instante.
5. Si es necesario, actualiza las definiciones de tipos en TypeScript.
6. Prueba la página para verificar la correcta transición de estilos.

3. Patrón de Fábrica y Selección Dinámica de Estilos

Cada bloque delega el renderizado visual a un subcomponente específico según el valor del campo `style` (style-1, style-2, etc.).

• Componente elegante de respaldo (Fallback) que muestra advertencias al desarrollador en modo de desarrollo.
• Registro instantáneo del error en el sistema centralizado de logs OpenObserve.
• En producción, el resto de la página continúa funcionando sin interrupciones.
• Validación estricta de datos mediante interfaces de TypeScript.

import React from "react"
import ProductShowcaseBlock from "./ProductShowcaseBlock"
import FeaturesBlock from "./FeaturesBlock"
import BlockAnimateWrapper from "./BlockAnimateWrapper"
 
 
export default async function BlockRenderer({ block, region, countryCode, index }) {
  let BlockContent: React.ReactNode = null
 
  switch (block.__component) {
    case "ui.product-showcase-block":
      BlockContent = <ProductShowcaseBlock block={block} region={region} countryCode={countryCode} />
      break
    case "ui.features-block":
      BlockContent = <FeaturesBlock block={block} />
      break
    default:
      return null
  }
 
  return <BlockAnimateWrapper index={index}>{BlockContent}</BlockAnimateWrapper>
}