Seminar Strapi 5 – Headless-Frontend-Integration mit JavaScript und TypeScript

Die Schulung verbindet Strapi 5 mit modernen JavaScript- und TypeScript-Frontends. Behandelt werden API-Client, Typen, Datenzugriff, Komponenten und Dynamic Zones, Medien, Authentifizierung, Vorschau, Fehlerbehandlung, Caching, Revalidierung und automatisierte Vertragstests. Die Umsetzung erfolgt an einem durchgängigen Seminarprojekt mit nachvollziehbaren Prüfschritten.

Inhaltsübersicht

• Integrationsarchitektur und Datenverträge
• API-Client und Konfiguration
• TypeScript-Typen und Datenmapping
• Abfragen, Populate und Listen
• Komponenten und Dynamic Zones rendern
• Medien und responsive Auslieferung
• Authentifizierung und geschützte Inhalte
• Preview, Entwürfe und Veröffentlichungswechsel
• Caching, Revalidierung, Fehler und Tests

Lernziele und Kompetenzen

• eine saubere Integrationsschicht zwischen Frontend und Strapi entwerfen
• Daten typisiert, effizient und fehlertolerant abrufen
• Komponenten, Dynamic Zones und Medien robust rendern
• Authentifizierung, Preview und Publikationsstatus integrieren
• Caching, Revalidierung und Vertragstests kontrolliert umsetzen

Zielgruppe

Frontend-Entwickler, Full-Stack-Entwickler, technische Architekten und Integrationsentwickler

Voraussetzungen

Sichere JavaScript- oder TypeScript-Kenntnisse, HTTP- und API-Grundlagen sowie grundlegende Strapi-Erfahrung

Seminarinhalte

Modul 1: Integrationsarchitektur und Datenverträge

Frontend-Laufzeit, Server- und Clientzugriffe, REST oder GraphQL, Content-Verträge, Umgebungen, Fehlergrenzen und Verantwortlichkeiten.

1. Schritt 1: Ziel, Abhängigkeiten und Einsatzgrenzen des Themenblocks „Integrationsarchitektur und Datenverträge“ einordnen.
2. Schritt 2: Konfiguration oder Implementierung schrittweise umsetzen: Frontend-Laufzeit, Server- und Clientzugriffe, REST oder GraphQL, Content-Verträge, Umgebungen, Fehlergrenzen und Verantwortlichkeiten.
3. Schritt 3: Praxisergebnis herstellen und dokumentieren: Eine Integrationsarchitektur mit klarer Trennung von Transport-, Mapping- und Darstellungsschicht entwerfen.
4. Schritt 4: Ergebnis mit repräsentativen Daten, Rollen, API-Anfragen und Fehlerfällen prüfen; Abweichungen korrigieren und Betriebsfolgen festhalten.

Modul 2: API-Client und Konfiguration

zentrale Basis-URL, Strapi Client oder eigener Wrapper, Header, Token, Timeout, Abbruch, Wiederholung und Umgebungsumschaltung.

1. Schritt 1: Ziel, Abhängigkeiten und Einsatzgrenzen des Themenblocks „API-Client und Konfiguration“ einordnen.
2. Schritt 2: Konfiguration oder Implementierung schrittweise umsetzen: zentrale Basis-URL, Strapi Client oder eigener Wrapper, Header, Token, Timeout, Abbruch, Wiederholung und Umgebungsumschaltung.
3. Schritt 3: Praxisergebnis herstellen und dokumentieren: Einen wiederverwendbaren Client mit sicherer Konfiguration und standardisierter Fehlerbehandlung implementieren.
4. Schritt 4: Ergebnis mit repräsentativen Daten, Rollen, API-Anfragen und Fehlerfällen prüfen; Abweichungen korrigieren und Betriebsfolgen festhalten.

Modul 3: TypeScript-Typen und Datenmapping

API-Antworten, optionale Felder, documentId, Komponenten, Relationen, Laufzeitvalidierung und interne View-Modelle.

1. Schritt 1: Ziel, Abhängigkeiten und Einsatzgrenzen des Themenblocks „TypeScript-Typen und Datenmapping“ einordnen.
2. Schritt 2: Konfiguration oder Implementierung schrittweise umsetzen: API-Antworten, optionale Felder, documentId, Komponenten, Relationen, Laufzeitvalidierung und interne View-Modelle.
3. Schritt 3: Praxisergebnis herstellen und dokumentieren: Externe Content-Strukturen in stabile interne Typen und View-Modelle überführen.
4. Schritt 4: Ergebnis mit repräsentativen Daten, Rollen, API-Anfragen und Fehlerfällen prüfen; Abweichungen korrigieren und Betriebsfolgen festhalten.

Modul 4: Abfragen, Populate und Listen

Felder, Relationen, verschachtelte Inhalte, Filter, Sortierung, Pagination, Suchparameter und Vermeidung übergroßer Antworten.

1. Schritt 1: Ziel, Abhängigkeiten und Einsatzgrenzen des Themenblocks „Abfragen, Populate und Listen“ einordnen.
2. Schritt 2: Konfiguration oder Implementierung schrittweise umsetzen: Felder, Relationen, verschachtelte Inhalte, Filter, Sortierung, Pagination, Suchparameter und Vermeidung übergroßer Antworten.
3. Schritt 3: Praxisergebnis herstellen und dokumentieren: Eine Listen- und Detailansicht mit gezielten Abfragen und stabiler Navigation entwickeln.
4. Schritt 4: Ergebnis mit repräsentativen Daten, Rollen, API-Anfragen und Fehlerfällen prüfen; Abweichungen korrigieren und Betriebsfolgen festhalten.

Modul 5: Komponenten und Dynamic Zones rendern

Komponentenregister, typbasierte Zuordnung, unbekannte Komponenten, Fallbacks, Verschachtelung und redaktionelle Varianten.

1. Schritt 1: Ziel, Abhängigkeiten und Einsatzgrenzen des Themenblocks „Komponenten und Dynamic Zones rendern“ einordnen.
2. Schritt 2: Konfiguration oder Implementierung schrittweise umsetzen: Komponentenregister, typbasierte Zuordnung, unbekannte Komponenten, Fallbacks, Verschachtelung und redaktionelle Varianten.
3. Schritt 3: Praxisergebnis herstellen und dokumentieren: Einen sicheren Renderer mit explizitem Komponentenregister und Fallback-Verhalten aufbauen.
4. Schritt 4: Ergebnis mit repräsentativen Daten, Rollen, API-Anfragen und Fehlerfällen prüfen; Abweichungen korrigieren und Betriebsfolgen festhalten.

Modul 6: Medien und responsive Auslieferung

URLs, Metadaten, Formate, Alternativtexte, Größen, Platzhalter, externe Provider und robuste Behandlung fehlender Dateien.

1. Schritt 1: Ziel, Abhängigkeiten und Einsatzgrenzen des Themenblocks „Medien und responsive Auslieferung“ einordnen.
2. Schritt 2: Konfiguration oder Implementierung schrittweise umsetzen: URLs, Metadaten, Formate, Alternativtexte, Größen, Platzhalter, externe Provider und robuste Behandlung fehlender Dateien.
3. Schritt 3: Praxisergebnis herstellen und dokumentieren: Ein responsives Medienmodell mit Accessibility- und Fehleranforderungen integrieren.
4. Schritt 4: Ergebnis mit repräsentativen Daten, Rollen, API-Anfragen und Fehlerfällen prüfen; Abweichungen korrigieren und Betriebsfolgen festhalten.

Modul 7: Authentifizierung und geschützte Inhalte

Anmeldung, Tokenablage, serverseitige Sitzungen, Weitergabe, Erneuerung, Abmeldung, Rollen und geschützte Routen.

1. Schritt 1: Ziel, Abhängigkeiten und Einsatzgrenzen des Themenblocks „Authentifizierung und geschützte Inhalte“ einordnen.
2. Schritt 2: Konfiguration oder Implementierung schrittweise umsetzen: Anmeldung, Tokenablage, serverseitige Sitzungen, Weitergabe, Erneuerung, Abmeldung, Rollen und geschützte Routen.
3. Schritt 3: Praxisergebnis herstellen und dokumentieren: Einen geschützten Bereich ohne Offenlegung sensibler Tokens im Browser umsetzen.
4. Schritt 4: Ergebnis mit repräsentativen Daten, Rollen, API-Anfragen und Fehlerfällen prüfen; Abweichungen korrigieren und Betriebsfolgen festhalten.

Modul 8: Preview, Entwürfe und Veröffentlichungswechsel

Vorschaupfade, sichere Preview-Tokens, Draft- und Published-Kontext, Cache-Umgehung, Ablauf und Freigabeprüfung.

1. Schritt 1: Ziel, Abhängigkeiten und Einsatzgrenzen des Themenblocks „Preview, Entwürfe und Veröffentlichungswechsel“ einordnen.
2. Schritt 2: Konfiguration oder Implementierung schrittweise umsetzen: Vorschaupfade, sichere Preview-Tokens, Draft- und Published-Kontext, Cache-Umgehung, Ablauf und Freigabeprüfung.
3. Schritt 3: Praxisergebnis herstellen und dokumentieren: Eine kontrollierte Vorschau für unveröffentlichte Inhalte mit zeitlich begrenztem Zugriff entwickeln.
4. Schritt 4: Ergebnis mit repräsentativen Daten, Rollen, API-Anfragen und Fehlerfällen prüfen; Abweichungen korrigieren und Betriebsfolgen festhalten.

Modul 9: Caching, Revalidierung, Fehler und Tests

Cache-Schlüssel, Revalidierung über Webhooks, Stale-Inhalte, Ausfallverhalten, Monitoring, Mocking und Vertragstests.

1. Schritt 1: Ziel, Abhängigkeiten und Einsatzgrenzen des Themenblocks „Caching, Revalidierung, Fehler und Tests“ einordnen.
2. Schritt 2: Konfiguration oder Implementierung schrittweise umsetzen: Cache-Schlüssel, Revalidierung über Webhooks, Stale-Inhalte, Ausfallverhalten, Monitoring, Mocking und Vertragstests.
3. Schritt 3: Praxisergebnis herstellen und dokumentieren: Ein Cache- und Revalidierungskonzept implementieren und API-Änderungen automatisiert erkennen.
4. Schritt 4: Ergebnis mit repräsentativen Daten, Rollen, API-Anfragen und Fehlerfällen prüfen; Abweichungen korrigieren und Betriebsfolgen festhalten.

Praxisübungen und Qualitätssicherung

• Aufbau eines kleinen typisierten Frontends mit Listen-, Detail- und Dynamic-Zone-Ansicht
• Preview- und Authentifizierungsablauf mit Negativtests
• Vertragstest-Suite für Content-Modelle und API-Antworten

Arbeitsunterlagen

Die Unterlagen enthalten Konfigurationsbeispiele, Prüflisten, Übungsaufgaben, Fehlerbilder und eine strukturierte Dokumentationsvorlage für die Übertragung in eigene Projekte.