Rendering

cmssy-Inhalte in deiner App rendern

Eine Catch-all-Route macht aus jeder veröffentlichten Seite - Blöcke, Layout, SEO und Sprache - server-gerendertes HTML in deinem eigenen Next.js-Frontend.

Rendering

Die Catch-all-Route, Seiten-Komponente, Metadaten, Layout, lokalisiertes Routing und ISR-Revalidierung.

Die Catch-all-Route

Ein cmssy-Workspace speichert Inhalte; deine App rendert sie. Eine optionale Catch-all-Route - app/[[...path]]/page.tsx - bildet jeden veröffentlichten Slug (und sein Sprach-Präfix) auf eine Seite ab. createCmssyPage lädt die Seite für den aktuellen Pfad, ordnet jeden Block deiner registrierten Komponente zu und rendert ihn auf dem Server.

Die Catch-all-Route ist statisch renderbar: Sie liest nie searchParams oder headers(), sodass ISR aktiv bleibt. Die Entwurfsvorschau funktioniert weiterhin pro Request über 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);

Seiten-Komponente & Konfiguration

createCmssyPage(config, blocks, options?) gibt eine asynchrone Server-Komponente zurück. config stammt aus defineCmssyConfig; blocks ist das Array der defineBlock-Definitionen, die das SDK über type zuordnet. Übergib { editor }, um den visuellen Editor auf der Vorschau-Route einzuhängen, oder { path }, um eine Einzelseiten-Route festzulegen.

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,
});

Was dieser Abschnitt abdeckt

Die Catch-all-Route, Seiten-Komponente, Metadaten, Layout, lokalisiertes Routing und ISR-Revalidierung.

Die Verdrahtung, ein Thema pro Seite. Beim ersten Mal der Reihe nach lesen; danach springen.

Routen und Seiten - Config, Middleware, die öffentliche Catch-all-Route und die Edit-Route. Als Ganzes übernehmen: die Teile hängen voneinander ab.
Layouts - Header und Footer als editierbare Blöcke, und warum ein fehlender editierbarer Wrapper still bricht.
Entwurfsvorschau - die drei Wege zu unveröffentlichten Inhalten und das jeweilige Secret.
i18n - Locales, URL-Präfixe und was rendert, wenn eine Übersetzung fehlt.
SEO - Metadaten, Sitemap und Robots, alles in deiner App.
Skripte - Analytics und Drittanbieter-Tags, und die CSP, die sie blockiert.

Eines gilt überall: Das SDK rendert Blöcke und mountet den Editor - mehr nicht. Metadaten, Sitemap, Locale-Helper und die Member-Session sind Code deiner App; was du selbst abfragst, steht in der Delivery-API.