Renderizado

Renderiza contenido de cmssy en tu app

Una sola ruta catch-all convierte cada página publicada - bloques, layout, SEO e idioma - en HTML renderizado en el servidor en tu propio frontend Next.js.

Renderizado

La ruta catch-all, el componente de página, los metadatos, el layout, el enrutamiento localizado y la revalidación ISR.

La ruta catch-all

Un workspace de cmssy almacena el contenido; tu app lo renderiza. Una ruta catch-all opcional - app/[[...path]]/page.tsx - asigna cada slug publicado (y su prefijo de idioma) a una página. createCmssyPage obtiene la página para la ruta actual, asocia cada bloque a tu componente registrado y lo renderiza en el servidor.

La ruta catch-all es renderizable estáticamente: nunca lee searchParams ni headers(), así que el ISR sigue activo. La vista previa de borradores sigue funcionando por petición mediante draftMode().

import { createCmssyPage } from "@cmssy/next/server";
import { cmssy } from "@/cmssy.config";
import { blocks } from "@/cmssy/blocks";

export const revalidate = 3600;

// The public route stays static. A verified editor request is rewritten by the
// middleware onto app/cmssy-edit/[[...path]], mounted with createCmssyEditPage.
export default createCmssyPage(cmssy, blocks);

Componente de página y configuración

createCmssyPage(config, blocks, options?) devuelve un componente de servidor asíncrono. config viene de defineCmssyConfig; blocks es el array de definiciones defineBlock que el SDK asocia por type. Pasa { editor } para montar el editor visual en la ruta de vista previa, o { path } para fijar una ruta de una sola página.

import { defineCmssyConfig } from "@cmssy/next";

// Pass process.env raw: defineCmssyConfig validates at startup and names any
// variable you are missing. A `?? ""` fallback would hide that, and the error
// would surface later, somewhere unrelated.
//
// This module reads server env. Never import a VALUE from it (or from a module
// that imports it) in a "use client" component - types are erased, values drag
// process.env into the browser bundle.
export const cmssy = defineCmssyConfig({
  org: process.env.CMSSY_ORG_SLUG,
  workspaceSlug: process.env.CMSSY_WORKSPACE_SLUG,
  draftSecret: process.env.CMSSY_DRAFT_SECRET,
});

Qué cubre esta sección

La ruta catch-all, el componente de página, los metadatos, el layout, el enrutamiento localizado y la revalidación ISR.

El cableado, un asunto por página. La primera vez léelas en orden; después, salta.

Rutas y páginas: configuración, middleware, la ruta catch-all pública y la de edición. Cópialo entero: las piezas dependen unas de otras.
Layouts: cabecera y pie como bloques editables, y por qué omitir el envoltorio editable rompe en silencio.
Vista previa de borrador: las tres formas de ver contenido sin publicar y el secreto de cada una.
i18n: locales, prefijos de URL y qué se renderiza cuando falta una traducción.
SEO: metadatos, sitemap y robots, todo en manos de tu app.
Scripts: analítica y etiquetas de terceros, y la CSP que las bloquea.

Una idea para todas: el SDK renderiza bloques y monta el editor, y ahí para. Metadatos, sitemap, helpers de locale y la sesión de miembro son código de tu app; lo que consultas por tu cuenta está en la API de entrega.