Rendermodi

Der Code deines Astroprojekts muss als HTML gerendert werden, um im Browser dargestellt werden zu können.

Astro-Seiten, Routen oder API-Endpunkte können entweder zum Erzeugungszeitpunkt vorgerendert oder bei Bedarf auf dem Server gerendert werden. Mit Astro-Inseln kannst du auch client-seitiges Rendering hinzufügen, falls notwendig.

In Astro passieren die meisten Prozesse auf dem Server statt im Browser. Dies macht deine Seite oder App grundsätzlich schneller als durch reines Client-seitiges Rendering, vor allem auf weniger performanten Geräten oder bei schlechter Internetverbindung. Server-seitig gerendertes HTML ist schnell, SEO-freundlich, und standardmäßig barrierefrei.

Server-Ausgabemodus

Du kannst mit der output-Konfiguration ändern, wie deine Seiten gerendert werden.

Vorgerendert

Der Standardausgabemodus ist output: 'static', was bedeutet, dass das HTML für alle deine Seiten und Routen im Erzeugungszeitpunkt kreiert wird.

In diesem Modus ist deine gesamte Webseite vorgerendert und auf dem Server werden alle Seiten im Voraus erstellt und können an den Browser gesendet werden. Dasselbe HTML-Dokument wird an den Browser jedes Besuchers gesendet, und um den Inhalt deiner Seite zu aktualisieren, muss die Seite komplett neu erstellt werden. Diese Methode ist auch als statische Seitengeneration (SSG) bekannt.

Standardmäßig sind Astro-Projekte so konfiguriert, dass sie beim Erzeugungszeitpunkt vorgerendert werden (also statisch generiert), um eine möglichst schlanke Browser-Erfahrung zu gewährleisten. Der Browser muss nicht darauf warten, dass das HTML erst erstellt werden muss, weil der Server keine Seiten bei Bedarf erstellen muss. Deine Webseite ist nicht von der Leistung deines Servers abhängig, und wenn das HTML einmal erstellt wurde, wird deine Webseite als statische Seite für deine Besucher verfügbar sein, solange dein Server funktioniert.

Statische Seiten können Astro-Inseln für interaktive UI-Komponenten (oder sogar ganze eingebettete, Client-seitig gerenderte Apps), geschrieben in einem UI-Framework deiner Wahl, beinhalten.

Astros View Transitions API sind auch im static-Modus für Animationen und Statuspersistenz über Seitennavigation hinweg verfügbar. Statische Seiten können auch Middleware verwenden, um Daten eines Request abzufangen und zu verändern.

Bei Bedarf gerendert

Mit einem SSR-Adapter können Astros andere beiden Ausgabemodi konfiguriert werden, um Rendering bei Bedarf (on-demand) auf einigen oder all deinen Seiten, Routen oder API-Endpunkten zu ermöglichen:

output: 'server' für eine sehr dynamische Webseite mit hauptsächlich oder auschließlich on-demand Routen.
output: 'hybrid' für hauptsächlich statische Webseiten mit einigen on-demand Routen.

Da sie bei jedem Besuch neu generiert werden, können diese Routen für jeden Besucher personalisiert werden. So können zum Beispiel on-demand gerenderte Seiten einem eingeloggten Benutzer deren Profilinformationen angezeigt werden, oder auch frisch aktualisierte Daten, ohne die Notwendigkeiten eines erneuten und vollständig Erzeugungsschritt. On-demand Rendering auf dem Server ist auch als Server-seitiges Rendering (SSR) bekannt.

Lies mehr über mögliche Features mit on-demand Rendering, wie zum Beispiel Cookies, Response- und Request-Objekte, HTML-Streaming, und so weiter.

Erwäge den server- oder hybrid-Modus in deinem Astro-Projekt, wenn du das folgende benötigst:

API-Endpunkte: Erstelle spezifische Seiten, die als API-Endpunkte für Aufgaben wie Datenbankzugriff, Authentifizierung und Authorisierung funktionieren, während sensible Daten vom Client geheim gehalten werden.
Geschützte Seiten: Beschränke den Zugriff auf eine Seite basierend auf Benutzerrechten, indem du den Benutzerzugriff auf dem Server verwaltest.
Sich häufig ändernder Inhalt: Generiere individuelle Seiten ohne einen statische Neuerzeugung deiner Seite. Das ist vor allem dann hilfreich, wenn sich der Inhalt deiner Seite häufig ändert, zum Beispiel durch das Anzeigen von Daten einer API, die mit fetch() dynamisch angefragt werden.

Sowohl der server- als auch der hybrid-Modus erlauben die Verwendung von Astro-Inseln für mehr Interaktivität (oder sogar ganze eingebettete, clientseitig gerenderte Apps) mit einem UI-Framework deiner Wahl. Wenn du Middleware und Astros View Transitions API für Animationen und Statuspersistenz verwendest, sind sogar sehr interaktive Apps möglich.

Wirke mit

Community