# In vier Schritten vom Entwurf zur Live-Seite

Was zwischen einer Änderung in Storyblok und der Seite passiert, die Sie gerade lesen.

## Der Weg zur Veröffentlichung

1. **Modellieren**
   
   Blöcke sind in einer JSON-Datei definiert und werden in den Storyblok-Space übertragen. Die TypeScript-Typen entstehen aus derselben Datei.
   
   [storyblok/components.json](https://github.com/marcop135/nextstory/blob/main/storyblok/components.json)

2. **Vorschau**
   
   Der Visual Editor öffnet die Preview-Route. Sie prüft Secret und Entwurf, bevor sie den Draft Mode von Next.js aktiviert.
   
   [src/app/api/preview/route.ts](https://github.com/marcop135/nextstory/blob/main/src/app/api/preview/route.ts)

3. **Veröffentlichen**
   
   Storyblok ruft die Revalidate-Route mit dem Story-Slug auf. Die Route prüft die Daten und lässt den Cache-Tag dieser Story ablaufen.
   
   [src/app/api/revalidate/route.ts](https://github.com/marcop135/nextstory/blob/main/src/app/api/revalidate/route.ts)

4. **Ausliefern**
   
   Die nächste Anfrage lädt die veröffentlichte Story aus dem Storyblok-CDN und rendert sie als React Server Component.
   
   [src/lib/fetch-story.ts](https://github.com/marcop135/nextstory/blob/main/src/lib/fetch-story.ts)

## Warum die Cache-Tags wichtig sind

Veröffentlichte Stories werden pro Story gecacht. Ein Publish lässt eine Story in jeder Sprache ablaufen, der Rest der Site bleibt im Cache. Entwürfe werden nie gecacht, deshalb sieht die Redaktion immer die letzte Änderung.

Den vollständigen Request-Pfad beschreibt [docs/architecture.md](https://github.com/marcop135/nextstory/blob/main/docs/architecture.md).

## Die Schema-Namen werden React-Komponenten zugeordnet

Der Server registriert die Komponenten-Zuordnung, bevor er eine Story rendert. Jeder Blockname im CMS verweist auf seine Implementierung.

```TypeScript
export function registerStoryblokComponents(): void {
  setComponents(storyblokComponents);
}
```

Die Registrierungsfunktion, die der Server-Renderer verwendet.

[src/lib/storyblok.ts](https://github.com/marcop135/nextstory/blob/main/src/lib/storyblok.ts)

## Sehen, wie jeder Block aussieht

Die Block-Bibliothek zeigt jede Komponente einmal, beschriftet mit ihrem Storyblok-Namen.

[Block-Bibliothek öffnen](/de/blocks)

## Notizen zur Umsetzung

[Inhalte verknüpfen](/de/content-relationships)

Eine Story auf mehreren Seiten verwenden

[Cache-Invalidierung](/de/cache-invalidation)

Einmal veröffentlichen, abhängige Seiten aktualisieren

Canonical: https://nextstory.marcopontili.com/de/how-it-works
Content source: storyblok; published representation.