Astro
Astro Netlify SSR Einrichtung, erklärt
Geschrieben von Noel
Veröffentlicht:
22 Min. Lesezeit
Themen mit KI-Unterstützung recherchiert; von Noel vor der Veröffentlichung geprüft und überarbeitet.

Thema vertiefen
Weitere Astro-Guides, Glossar-Einträge und Workflows findest du im Themen-Hub.
Die Einrichtung des Astro Netlify Adapters für SSR ist der Prozess, bei dem der offizielle Netlify-Adapter zu einem Astro-Projekt hinzugefügt wird, damit Netlify On-Demand gerenderte Seiten und verwandte Laufzeiteigenschaften bereitstellen kann. Praktisch gesehen verbindet er die Build-Ausgabe von Astro mit der serverlosen und Edge-Laufzeit von Netlify, sodass deine Seite mehr als nur statisches HTML liefern kann.
Für eine Händlerseite, ein Dokumentationsportal oder eine Marketingseite, die dynamische Seiten benötigt, ist der Adapter das, was diesen Bereitstellungsweg auf Netlify sauber funktionieren lässt.
Wichtigste Erkenntnisse
- Verwende den Netlify-Adapter, wenn deine Astro-Seite On-Demand-Rendering, Server-Inseln, Aktionen, Sitzungen oder andere servergestützte Funktionen auf Netlify benötigt.
- Eine vollständig statische Astro-Seite benötigt den Adapter nicht, es sei denn, sie hängt von Netlify-Diensten ab, die einen Server erfordern, wie z.B. Bildverarbeitung.
- Du kannst den Adapter mit
astro add netlifyinstallieren oder@astrojs/netlifymanuell hinzufügen und dann inastro.config.mjsintegrieren.output: 'server'macht das serverseitige Rendern zur Standardeinstellung, während das On-Demand-Rendering pro Seite es dir ermöglicht, statische Seiten dort zu belassen, wo sie sinnvoll sind.- Middleware, Edge-Funktionen und Bildeinstellungen können beeinflussen, wie die Seite sich verhält, daher ist die Einrichtung nicht nur eine Einzeilige Installation.
Was ist das?
Der Astro Netlify Adapter ist die offizielle Integration, die ein Astro-Projekt für die Bereitstellung auf Netlify vorbereitet, wenn Laufzeit-Rendering benötigt wird. Er sagt Astro, wie die App verpackt werden soll, damit Netlify Seiten bereitstellen kann, die auf Anfrage gerendert werden, anstatt nur zur Build-Zeit. Das ist wichtig, wenn eine Seite von logikabhängigen Anforderungen, Benutzerzuständen oder Serverfunktionen abhängt, die statische Ausgaben nicht bereitstellen können.
Ein einfaches Beispiel ist eine Marketingseite mit überwiegend statischen Seiten, aber einigen Routen, die anforderungsbewusstes Verhalten benötigen. Du könntest die Startseite, den Blogindex und die Produktseiten statisch halten, während eine personalisierte Unterstützungsseite oder eine geschützte Ressourcenseite nach Bedarf gerendert wird. Der Adapter gibt Astro ein Bereitstellungsziel, das beide Seiten dieser Mischung versteht.
Die wichtige Unterscheidung ist, dass dies nicht für jedes Astro-Projekt erforderlich ist. Wenn du Astro ausschließlich als statischen Seiten-Builder verwendest und keine Netlify-Serverdienste benötigst, kannst du ohne Adapter bereitstellen. Der Adapter wird relevant, wenn das Projekt serverseitiges Rendern, Edge-Verhalten oder Netlify-spezifische Funktionen benötigt, die von der Laufzeitausführung abhängen.
Anders ausgedrückt, der Adapter geht weniger darum, „Astro zum Laufen zu bringen“, sondern mehr darum, das Rendering-Modell des Projekts an die Hosting-Plattform anzupassen. Deshalb tritt der Begriff Astro Netlify Adapter SSR Setup häufig auf, wenn ein Team von statischem Publishing zu hybrider oder servergerenderter Bereitstellung wechselt.
Ein nützliches mentales Modell ist, den Adapter als Übersetzungsschicht zu betrachten. Astro schreibt die Seite auf eine frameworkfreundliche Weise, aber Netlify muss wissen, welche Teile Funktionen werden sollen, welche Teile statisch bleiben können und wie Anfragen zwischen ihnen geroutet werden. Der Adapter übernimmt diese Übersetzung, sodass das Bereitstellungsziel dem Verhalten der App entspricht.
Er hilft auch Teams, eine gängige falsche Annahme zu vermeiden: dass SSR ein einziger Ein/Aus-Schalter ist. In Astro kann SSR selektiv sein. Eine Route kann vorgerendert werden, eine andere kann auf Nachfrage gerendert werden, und eine dritte kann Middleware oder Edge-Logik verwenden. Der Adapter ist es, der dieses gemischte Modell auf Netlify ohne benutzerdefinierte Infrastruktur bereitstellt.
Warum ist es wichtig
Der Geschäftswert ist klar: Der Adapter ermöglicht es Teams, die Leistungsfähigkeit von Astro beizubehalten und gleichzeitig das Laufzeitverhalten hinzuzufügen, das eine echte Seite manchmal benötigt. Das kann den Druck verringern, das gesamte Projekt in ein schwereres Anwendungs-Framework umzustellen, nur um einige dynamische Routen zu unterstützen. Für Händler bedeutet das einen schnelleren Weg zum Launch, ohne die Fähigkeit zur Personalisierung, Inhalte zu sperren oder serverseitige Logik dort zu nutzen, wo es wichtig ist.
Technisch ist es wichtig, weil die Bereitstellung der Ort ist, an dem viele „funktioniert lokal“-Projekte scheitern. Eine Astro-App kann in der Entwicklung perfekt gültig sein und trotzdem den richtigen Adapter benötigen, um korrekt auf Netlify bereitgestellt zu werden. Der Adapter richtet die Build-Ausgabe, Laufzeitfunktionen und Edge-Verhalten aus, sodass die Plattform die App wie beabsichtigt ausführen kann.
Es ist auch wichtig für die Wartbarkeit. Wenn dein Team weiß, welche Routen statisch sind und welche auf Laufzeit-Rendering angewiesen sind, kannst du bessere Entscheidungen über Caching, Middleware und Bildverarbeitung treffen. Das hält das Projekt einfacher zu verstehen als eine Seite, bei der jede Seite gleich behandelt wird, auch wenn die Anforderungen unterschiedlich sind.
Für Entwickler ist der Adapter auch ein Tool zur Festlegung von Grenzen. Er macht klarer, welche Funktionen zur Serverlaufzeit gehören und welche statisch bleiben sollten. Diese Klarheit hilft, wenn du die Leistung überprüfst, Bereitstellungsprobleme debuggen möchtest oder entscheidest, ob eine Funktion in Middleware, einer Aktion oder einer vorgerenderten Seite gehört.
Es gibt auch einen praktischen Kostenaspekt. Statische Seiten sind in der Regel günstiger und einfacher bereitzustellen, während Laufzeitseiten mehr bewegliche Teile einführen. Der Adapter ermöglicht es dir, diese Komplexität für die Routen zu reservieren, die sie tatsächlich benötigen, anstatt die Betriebskosten über die gesamte Seite zu verteilen. Das ist besonders wertvoll für inhaltsreiche Seiten, bei denen nur ein kleiner Prozentsatz der Seiten anforderungsbasierte Logik benötigt.
Ein zweiter Grund, warum es wichtig ist, ist die betriebliche Vorhersehbarkeit. Sobald der Adapter eingerichtet ist, kann das Team darüber nachdenken, wo Code ausgeführt wird: zur Build-Zeit, an der Edge oder in einer serverlosen Funktion. Diese Unterscheidung beeinflusst Debugging, Protokollierung und Sicherheitsüberprüfungen. Zum Beispiel verhält sich eine Weiterleitung, die in Edge-Middleware implementiert ist, anders als eine, die fest in eine Seitenkomponente codiert ist, und der Adapter macht diesen Unterschied deutlich.
Es hilft auch, wenn Teams das Wachstum planen. Eine Seite kann als Broschüre beginnen und später Sitzungen, geschützte Downloads oder anforderungsbewusste Personalisierung hinzufügen. Wenn der Bereitstellungsweg bereits diese Funktionen unterstützt, kann das Team die Seite weiterentwickeln, ohne eine störende Plattformmigration durchführen zu müssen. Das ist oft der echte Geschäftserfolg: nicht nur die erste Version auszuliefern, sondern die Architektur flexibel genug zu halten für die nächste.
Wie es funktioniert
Die Einrichtung beginnt mit dem Integrationsworkflow von Astro. Astro bietet einen Befehl astro add, der offizielle Integrationen automatisch installieren kann, einschließlich des Netlify-Adapters. Wenn du eine manuelle Kontrolle bevorzugst, kannst du @astrojs/netlify selbst installieren und es in astro.config.mjs hinzufügen. In jedem Fall ist das Ziel dasselbe: Astro zu sagen, dass Netlify das Bereitstellungsziel ist und dass die Serverfunktionen entsprechend verpackt werden sollten.
Sobald der Adapter eingerichtet ist, ändert Astro, wie es das Projekt erstellt. Anstatt nur statische Ausgaben zu produzieren, kann es On-Demand-gerenderte Routen und Laufzeitressourcen für die Netlify-Umgebung vorbereiten. Der Build kann einen .netlify/-Ordner erzeugen, der interne Funktionen und Edge-Funktionen enthält, die Netlify dann während der Bereitstellung verwendet. Das ist die Brücke zwischen deinem Astro-Quellcode und dem Ausführungsmodell der Hosting-Plattform.
Statisches, serverseitiges und hybrides Verhalten
Astro bietet dir einige Möglichkeiten, das Rendering zu gestalten. Du kannst das On-Demand-Rendering für bestimmte Seiten aktivieren, was die meisten Teile der Seite statisch hält, während ausgewählte Routen auf dem Server ausgeführt werden. Du kannst auch output: 'server' einstellen, wenn du möchtest, dass Seiten standardmäßig serverseitig gerendert werden. Der Adapter zwingt nicht zu einem Modell; er ermöglicht das Modell, das du wählst.
Diese Flexibilität ist nützlich, da nicht jede Route die gleichen Kosten oder Zwecke hat. Ein Blog-Archiv kann oft statisch bleiben, während eine Seite für eingeloggte Benutzer oder eine anforderungssensible Seite möglicherweise Laufzeit-Rendering benötigt. Der Adapter ermöglicht es dir, diese Unterscheidung zu treffen, ohne die Plattform zu wechseln.
Middleware und Edge-Ausführung
Standardmäßig verhält sich die Astro-Middleware je nach Seitentyp unterschiedlich. Bei vorgerendeten Seiten wird die Middleware zur Build-Zeit angewendet. Bei On-Demand-gerenderten Seiten läuft sie zur Laufzeit. Wenn du Weiterleitungen, Zugriffskontrolle oder benutzerdefinierte Antwort-Header für vorgerenderte Seiten benötigst, kannst du middlewareMode auf edge setzen, sodass die Middleware auf Netlify Edge-Funktionen läuft.
Das ändert den Anforderungsweg. Edge-Funktionen können die Anfrage untersuchen, bevor die Seite bereitgestellt wird, und für On-Demand-gerenderte Seiten kann die Edge-Schicht serialisierte context.locals an die serverlose Funktion weiterleiten. Netlify fügt hier auch eine Sicherheitsgrenze hinzu: Die serverlose Funktion erwartet, dass Anfragen von der generierten Edge-Funktion kommen, nicht direkt von beliebigen Quellen.
Bilder und externe Ressourcen
Der Adapter beeinflusst auch die Bildverarbeitung. Standardmäßig verwendet er das Netlify Image CDN, um Bilder in Echtzeit zu transformieren, ohne die Build-Zeiten zu verlangsamen. Das ist nützlich für Seiten mit großen Bildbibliotheken oder häufigen Inhaltsaktualisierungen. Wenn du dieses Verhalten nicht möchtest, kannst du es mit der Option imageCDN deaktivieren.
Wenn deine Seite externe Bilder lädt, musst du diese Domains oder externen Muster in der Astro-Konfiguration autorisieren. Das ist ein separates, aber verwandtes Einrichtungdetail und kann leicht übersehen werden, wenn Teams sich nur auf SSR konzentrieren. In der Praxis ist die Bildkonfiguration Teil derselben Bereitstellungsgespräch, weil sie beeinflusst, ob die Seite nach der Bereitstellung korrekt gerendert wird.
Ein subtiler, aber wichtiger Punkt ist, dass der Adapter nicht deine Architektur für dich entscheidet. Er macht die Architektur lediglich bereitstellbar. Wenn deine Seitenlogik von Cookies, Geolokalisierung oder Sitzungsstatus abhängt, gibt der Adapter Netlify einen Weg, diese Logik zur Anforderungszeit auszuführen. Wenn deine Seite statisch ist, fügt der Adapter keinen Wert von sich aus hinzu.
Ein weiterer Mechanismus, den es zu verstehen gilt, ist die Trennung zwischen Build-Zeit- und Anforderungs-Zeit-Daten. Statische Seiten werden einmal generiert, sodass alle Daten, die sie verwenden, zur Build-Zeit bekannt sein müssen. On-Demand-gerenderte Seiten können anforderungsspezifische Werte wie Header, Cookies oder Geolokalisierungsdaten lesen. Der Adapter ermöglicht es Astro, diese Unterscheidung zu bewahren, während er weiterhin über Netlify bereitstellt.
Diese Trennung ist der Grund, warum der Adapter oft mit sorgfältiger Routenplanung gepaart wird. Wenn eine Seite nur gelegentlich dynamische Daten benötigt, möchtest du vielleicht nicht die gesamte Seite serverseitig rendern. Stattdessen kannst du den standardmäßigen statischen Weg beibehalten und nur die anforderungsabhängigen Teile in On-Demand-Routen oder Middleware verschieben. Das ist in der Regel der effizienteste Weg, den Adapter zu nutzen.
Anwendungsfälle
Der häufigste Anwendungsfall ist eine hybride Marketing- oder Inhaltsseite. Viele Teams möchten ein schnelles statisches Frontend für den Großteil der Seite, benötigen jedoch auch einige servergestützte Routen für Personalisierung, Zugriffskontrolle oder Formularverarbeitung. Der Adapter macht das möglich, ohne das gesamte Projekt in eine servergerenderte App zu verwandeln.
Ein zweiter Anwendungsfall sind Inhaltsplattformen mit anforderungsbewusstem Verhalten. Zum Beispiel benötigt eine Dokumentationsseite möglicherweise lokalisierte Routen, geschützte Abschnitte oder Antwort-Header, die je nach Anfrage variieren. In diesen Fällen reicht allein die statische Ausgabe nicht aus, und der Adapter gibt Astro die Laufzeitsupport, um diese Bedürfnisse auf Netlify zu erfüllen.
Ein dritter Anwendungsfall sind Produkt- oder Kampagnenseiten, die auf Netlify-Dienste angewiesen sind. Die SERP-Forschung stellt fest, dass du den Adapter nur benötigst, wenn du zusätzliche Netlify-Dienste verwendest, die einen Server erfordern, wie das Netlify Image CDN. Das macht den Adapter relevant, selbst wenn die Seite überwiegend statisch ist, weil eine servergestützte Abhängigkeit die Bereitstellungsanforderung ändern kann.
Für Händler kommt die Entscheidung oft darauf an, ob die Seite anforderungsbasierte Logik benötigt. Wenn die Antwort ja ist, ist der Adapter in der Regel Teil des Bereitstellungsplans. Wenn die Antwort nein ist, ist der einfachere statische Weg oft besser.
Ein viertes Szenario sind interne Tools oder Partnerportale, die auf Astro basieren. Diese Projekte beginnen oft als Inhaltsseiten, fügen aber allmählich Authentifizierung, sitzungsbewusste Navigation oder rollenbasierte Zugriffe hinzu. Der Adapter ermöglicht es Teams, diese Funktionen hinzuzufügen, ohne die Astro-Codebasis aufzugeben, die sie bereits haben.
Es gibt auch eine nützliche Trennung zwischen „öffentlichen Inhalten“ und „privaten oder kontextbezogenen Inhalten“. Öffentliche Seiten wie Landingpages, Blogbeiträge und zeitlose Dokumentation sind oft ideal für die Vorabgerenderte Verarbeitung. Private Dashboards, Kontoseiten und anforderungssensible Landingpages sind bessere Kandidaten für das On-Demand-Rendering. Der Adapter ermöglicht es dir, beide Muster in einer Bereitstellung zu kombinieren.
Diese Kombination ist besonders hilfreich für Teams, die gleichzeitig auf SEO und Leistung achten. Suchgerichtete Seiten können statisch und schnell bleiben, während benutzerspezifische Seiten weiterhin dynamisch sein können. In der Praxis bedeutet das, dass du dich nicht zwischen einer leistungsfähigen Marketingseite und einer funktionalen Anwendung entscheiden musst.
Wie man es implementiert oder anwendet
Die sauberste Einrichtung beginnt mit der Entscheidung, ob du eine automatische oder manuelle Installation wünschst. Wenn du schnell vorankommst oder ein Standardprojekt einrichtest, ist astro add netlify der einfachste Weg, da es @astrojs/netlify installiert und die Astro-Konfiguration in einem Schritt aktualisiert. Wenn dein Projekt eine sorgfältig verwaltete Konfiguration hat oder du jede Änderung überprüfen möchtest, installiere das Paket manuell und bearbeite die Konfiguration selbst.
Eine grundlegende manuelle Einrichtung folgt dem Muster, das die Dokumentation beschreibt: Installiere das Paket, importiere den Adapter und füge adapter: netlify() in defineConfig ein. Von dort aus entscheidest du, ob deine Seite On-Demand-Rendering pro Seite oder serverseitig global verwenden soll. Diese Entscheidung sollte darauf basieren, wie viel von der Seite tatsächlich Laufzeit-Rendering benötigt.
Ein praktischer Einrichtungsworkflow
Beginne damit, deine Routen zu prüfen. Markiere, welche Seiten statisch sind, welche anforderungsbasierte Daten benötigen und welche von Middleware oder Sitzungen abhängen. Entscheide dann, ob die Seite größtenteils statisch bleiben soll mit einigen dynamischen Routen oder ob serverseitiges Rendering die Standardeinstellung sein sollte. Diese Entscheidung beeinflusst sowohl die Leistung als auch die Komplexität.
Überprüfe dann die Anforderungen an die Middleware. Wenn du Weiterleitungen, Zugriffskontrolle oder Antwort-Header benötigst, die angewendet werden müssen, bevor vorgerenderte Seiten bereitgestellt werden, setze middlewareMode: 'edge'. Wenn du dieses Verhalten nicht benötigst, halte das Standardmodell und vermeide es, Edge-Komplexität hinzuzufügen, die du nicht verwenden wirst.
Danach überprüfe das Verhalten von Bildern. Wenn du das Netlify Image CDN verwenden möchtest, lasse es aktiviert. Wenn du eine andere Bildpipeline benötigst, deaktiviere es ausdrücklich und konfiguriere die Astro-Bilddomänen oder externen Muster nach Bedarf. Dies ist eines dieser Details, die übersehen werden können, bis eine Bereitstellung fehlschlägt oder Bilder nicht wie erwartet geladen werden.
Baue schließlich lokal, bevor du bereitstellst. Die Dokumentation weist darauf hin, dass ein lokaler Build den Netlify-Ausgabeverzeichnis erzeugt, was ein nützlicher Kontrollpunkt ist. Sobald der Build sauber ist, verwende die Netlify-CLI, um bereitzustellen. Diese Reihenfolge hilft, Konfigurationsprobleme zu erkennen, bevor sie zu Produktionsproblemen werden.
Entscheidungskriterien für Teams
Verwende den Adapter, wenn die Seite On-Demand-Rendering, Server-Inseln, Aktionen, Sitzungen oder Netlify-spezifische Laufzeitdienste benötigt. Überspringe ihn, wenn die Seite vollständig statisch ist und nicht auf servergestützte Funktionen angewiesen ist. Wenn du unsicher bist, die richtige Frage ist nicht „Verwenden wir Astro?“, sondern „Braucht diese Bereitstellung Laufzeitausführung auf Netlify?“
Diese Betrachtungsweise hält die Einrichtung praktisch. Sie vermeidet es, statische Seiten übermäßig zu konstruieren, und verhindert, dass dynamische Seiten unterkonfiguriert werden. Für Teams, die Astro-Projekte professionell entwickeln, ist das der Unterschied zwischen einer Bereitstellung, die sich fragil anfühlt, und einer, die leicht zu warten ist.
Eine gute Implementierungsgewohnheit ist es, die Renderentscheidung neben jeder Route zu dokumentieren. Wenn ein Teamkollege später eine Seite hinzufügt, sollte er wissen, ob sie in den statischen Build, die On-Demand-Schicht oder den Edge-Middleware-Pfad gehört. Diese kleine Dokumentation verhindert versehentliche Rückschritte bei zukünftigen Inhalts- oder Funktionsaktualisierungen.
Es hilft auch, die erste Bereitstellung absichtlich klein zu halten. Beginne mit einer dynamischen Route, bestätige, dass der Adapter sie korrekt verpackt, und erweitere dann auf andere Routen, sobald das Verhalten bewiesen ist. Das verringert die Wahrscheinlichkeit, mehrere bewegliche Teile gleichzeitig zu debuggen. Für Teams mit gemischten Fertigkeiten ist dieses schrittweise Rollout oft sicherer, als die gesamte Seite am ersten Tag auf den Servermodus umzustellen.
Häufige Fehler und Fallstricke
Der größte Fehler besteht darin, anzunehmen, dass jede Astro-Seite den Adapter benötigt. Die Dokumentation ist eindeutig, dass eine statische Astro-Seite ihn nicht benötigt, es sei denn, sie verwendet zusätzliche Netlify-Dienste, die einen Server erfordern. Den Adapter überall standardmäßig zu installieren, kann die Komplexität erhöhen, ohne ein echtes Problem zu lösen.
Ein weiteres häufiges Problem ist, den Servermodus zu wählen, ohne zu überprüfen, ob die Seite ihn tatsächlich benötigt. output: 'server' ist nützlich, wenn serverseitiges Rendering die Standardeinstellung sein soll, ist jedoch kein kostenloses Upgrade. Wenn die meisten Seiten vorgerendert werden können, ist es oft einfacher, sie statisch zu halten und einfacher zu cachen.
Die Konfiguration der Middleware ist ein weiterer Bereich, in dem Teams ins Stolpern geraten. Wenn du Weiterleitungen oder Zugriffskontrolle auf vorgerenderten Seiten benötigst, musst du den Unterschied zwischen Middleware zur Build-Zeit und Edge-Ausführung verstehen. Ohne middlewareMode: 'edge' kannst du anforderungsbewusstes Verhalten erwarten, das nie dort ausgeführt wird, wo du es benötigst.
Bildeinstellungen können ebenfalls Verwirrung stiften. Die standardmäßige Verwendung des Netlify Image CDN durch den Adapter ist hilfreich, aber es ist immer noch eine Annahme zur Bereitstellung. Wenn deine externen Bilder nicht über die Astro-Konfiguration autorisiert sind, kann die Seite gebaut werden, aber es kann sein, dass die Assets in der Produktion nicht korrekt gerendert werden.
Ein letzter Fallstrick ist, lokalen Erfolg als Beweis für die Bereitstellungsvorbereitung zu behandeln. Bei Adaptern ist die lokale Build-Ausgabe wichtig, da sie zeigt, wie Astro die App für Netlify verpackt. Wenn der Build-Schritt nicht sauber ist, sind die Bereitstellungsprobleme in der Regel nicht weit entfernt.
Ein weiterer subtiler Fehler besteht darin, vorgerenderte und Laufzeitseiten zu mischen, ohne die gemeinsamen Codepfade zu überprüfen. Ein Helfer, der in einer Serverroute funktioniert, kann auf Anforderungsdaten angewiesen sein, die während des Vorabgerenderns nicht vorhanden sind. Wenn das passiert, kann die Seite auf zufällig aussehende Weise fehlschlagen, es sei denn, du trennst frühzeitig die Annahmen zur Build-Zeit und Laufzeit.
Teams vergessen auch manchmal, dass Edge-Middleware und serverloses Rendering unterschiedliche Schichten sind. Eine Weiterleitung, die in einer Schicht funktioniert, verhält sich möglicherweise nicht in der gleichen Weise in einer anderen, insbesondere wenn Cookies oder Header beteiligt sind. Wenn eine Route auf den Anfragekontext angewiesen ist, überprüfe, welche Schicht diese Logik besitzt, bevor du sie auslieferst.
Best Practices und Schnellcheckliste
Die beste Praxis ist, das Rendering-Modell so einfach wie das Projekt es zulässt zu halten. Statische Seiten sollten statisch bleiben. Dynamische Seiten sollten aus einem bestimmten Grund dynamisch sein. Diese Trennung macht die Einrichtung des Astro Netlify Adapters für SSR einfacher zu warten und später leichter zu debuggen.
Eine gute zweite Praxis ist es, zu dokumentieren, welche Funktionen auf die Unterstützung von Netlify-Laufzeiten angewiesen sind. Wenn ein Teamkollege später den Adapter entfernt oder die Middleware-Einstellungen ändert, sollte diese Abhängigkeit offensichtlich sein. Dies ist besonders wichtig bei inhaltsreichen Seiten, bei denen das Laufzeitverhalten von der Startseite aus nicht sichtbar ist.
Eine weitere Best Practice ist, den Bereitstellungsweg zu testen, nicht nur den lokalen Entwicklungsweg. Baue lokal, überprüfe die generierten Netlify-Artefakte und bestätige, dass die Seiten, die du für dynamisch erwartest, tatsächlich über den Adapter geroutet werden. Das ist der schnellste Weg, um Abweichungen zwischen Absicht und Konfiguration zu erkennen.
Schnelle Checkliste
- Bestätige, ob die Seite tatsächlich On-Demand-Rendering oder den Servermodus benötigt.
- Installiere den Adapter mit
astro add netlifyoder füge@astrojs/netlifymanuell hinzu. - Aktualisiere
astro.config.mjsmit dem Adapter und allen Rendering-Optionen. - Entscheide, ob die Middleware an der Edge ausgeführt werden soll.
- Überprüfe das Verhalten des Bild-CDN und die Autorisierung externer Bilder.
- Baue lokal, bevor du auf Netlify bereitstellst.
- Verifiziere nach der Bereitstellung alle anforderungsabhängigen Seiten.
- Halte die Entscheidungen zum Rendering auf Routenebene für zukünftige Bearbeitungen dokumentiert.
Wenn du einen breiteren Astro-Stack verwaltest, kann es auch hilfreich sein, diese Einrichtung mit einer klaren Inhaltsarchitektur zu koppeln. Ein strukturiertes Inhaltsmodell erleichtert es, zu entscheiden, welche Routen statisch bleiben und welche Laufzeitverhalten benötigen. Für das ist der Leitfaden zu Inhaltskollektionen ein nützlicher Begleiter.
Eine letzte Best Practice ist es, die Einrichtung zu überprüfen, wenn sich die Anforderungen ändern. Eine Seite, die als statisch beginnt, benötigt möglicherweise später Sitzungen, Edge-Weiterleitungen oder Bildverarbeitung, und diese Ergänzungen können die ideale Adapterkonfiguration ändern. Betrachte die Einrichtung als Teil der Architektur, nicht als einmalige Installation.
Aus der Praxis — Illustratives Szenario (hypothetisch, kein Kundenprojekt)
Illustratives Beispiel — kein echtes Kundenprojekt: Stell dir vor, ein Händler startet eine Produktbildungsseite in Astro. Die Seite hat eine statische Startseite, einen Blog und mehrere Kampagnenseiten, benötigt jedoch auch einen Bereich mit Ressourcen nur für Mitglieder, anforderungsbasierte Weiterleitungen für ältere Kampagnen-URLs und Bildtransformationen für eine große Bibliothek von Produktvisualisierungen.
Zunächst könnte das Team versuchen, alles statisch zu halten, da die Seite wie ein Marketing-Bauwerk wirkt. Das funktioniert für die öffentlichen Seiten, aber die geschützten Ressourcen und Weiterleitungen schaffen ein Problem: Die statische Ausgabe kann nicht zuverlässig anforderungszeitabhängige Zugriffsprüfungen oder Antwortlogik behandeln. Das Team evaluiert dann, ob es die gesamte Seite in ein schwereres Framework verschieben oder Astro beibehalten und den Netlify-Adapter hinzufügen soll.
Der praktische Ansatz besteht darin, die öffentlichen Seiten vorgerendert zu halten und das On-Demand-Rendering nur dort zu aktivieren, wo es benötigt wird. Middleware wird so konfiguriert, dass sie auf Netlify Edge-Funktionen ausgeführt wird, sodass Weiterleitungen und Zugriffskontrolle geschehen können, bevor die Seite bereitgestellt wird. Das Team lässt auch das Netlify Image CDN aktiviert, da die Seite von vielen externen und transformierten Bildern abhängt, was sonst die Build-Überlastung erhöhen würde.
Ein sinnvoller Workflow in diesem Szenario wäre es, jede Route in eine von drei Kategorien zuzuordnen: statisch, On-Demand oder Edge-abhängig. Die Startseite und der Blog bleiben statisch. Der Mitgliederressourcenbereich wird On-Demand gerendert, da er anforderungszeitabhängige Prüfungen benötigt. Die Weiterleitungslogik verschiebt sich in die Edge-Middleware, da sie vor der Anfrage auf die Seite ausgeführt werden muss. Diese einfache Klassifizierung hält die Einrichtung verständlich.
Das Team würde dann die Seite in der gleichen Reihenfolge testen, in der ein Besucher sie erlebt: zuerst die Weiterleitung, dann das Zugangstor, dann das Seitenrendering und schließlich das Laden der Bilder. Wenn ein Schritt fehlschlägt, ist die Lösung normalerweise an der Grenze zwischen statischem und Laufzeitverhalten zu finden, nicht im Seiteninhalt selbst. Deshalb ist der Adapter wertvoll: Er macht diese Grenzen deutlich.
Ein nützliches Implementierungsdetail in diesem Szenario ist es, die Zuständigkeit für jede Funktion zu definieren. Weiterleitungen gehören zur Edge-Middleware, Zugriffsprüfungen gehören zur On-Demand-Route, und das Verhalten von Bildern gehört zur Adapterkonfiguration. Wenn diese Verantwortlichkeiten klar getrennt sind, wird das Debuggen viel einfacher, da jedes Problem eine wahrscheinliche Schicht und eine wahrscheinliche Lösung hat.
Das Team könnte auch eine kurze Bereitstellungsliste für zukünftige Mitwirkende erstellen: Bestätige, dass die Route im richtigen Rendering-Modus ist, dass die Middleware weiterhin an der Edge läuft, dass die Bildpipeline weiterhin aktiviert ist und dass der lokale Build mit der Netlify-Ausgabe übereinstimmt. So eine Checkliste ist einfach, verhindert jedoch versehentliche Rückschritte, wenn die Seite wächst.
Die Erkenntnis ist nicht, dass jede Funktion serverseitig gerendert werden sollte. Es ist, dass der Adapter es dem Team ermöglicht, zu wählen, wo Laufzeitverhalten hingehört. Das hält die Seite schnell für Besucher, handhabbar für Entwickler und einfacher zu entwickeln, wenn die nächste Funktionsanfrage eintrifft.
Verwandte Konzepte und weiterführende Literatur
Wenn du entscheidest, ob du statisch bleiben oder Laufzeitverhalten hinzufügen möchtest, helfen dir diese verwandten Leitfäden, die Bereitstellungswahl mit dem Rest des Astro-Stacks zu verbinden.
- Astro Inhaltskollektionen — nützlich, wenn deine Rendering-Strategie von sauberem Inhaltsmodell abhängt.
- Astro Islands Architektur — hilfreicher Kontext, um interaktive Teile isoliert zu halten.
- Astro Themes — durchstöbere Astro-fähige Ausgangspunkte, wenn du einen schnelleren Weg zum Start wünschst.
- Northframe — eine Themenoption für Teams, die eine polierte Astro-Seite mit sauberer Struktur erstellen.
- Netlify Bereitstellungsleitfaden — offizielle Bereitstellungsreferenz für das Netlify-Ziel.
Thema vertiefen
Weitere Astro-Guides, Glossar-Einträge und Workflows findest du im Themen-Hub.
Häufige Fragen
Wann benötige ich den Astro Netlify Adapter?
Du benötigst den Adapter, wenn deine Astro-Seite Funktionen für On-Demand-Rendering auf Netlify verwendet, wie servergerenderte Seiten, Server-Inseln, Aktionen oder Sitzungen. Wenn deine Seite vollständig statisch ist und keine Netlify-Serverfunktionen benötigt, ist der Adapter möglicherweise nicht erforderlich.
Kann ich den Netlify-Adapter automatisch installieren?
Ja. Astro unterstützt den Befehl `astro add`, der offizielle Integrationen installieren und deine Konfiguration automatisch aktualisieren kann. Du kannst auch `@astrojs/netlify` manuell installieren, wenn du die Schritte lieber selbst steuern möchtest.
Macht der Adapter jede Astro-Seite servergerendert?
Nicht unbedingt. Du kannst On-Demand-Rendering für jede Seite aktivieren oder `output: 'server'` einstellen, um Seiten standardmäßig servergerendert zu machen. Das bedeutet, dass du statisches und servergerendertes Verhalten je nach Bedarf des Projekts mischen kannst.
Wofür wird middlewareMode edge verwendet?
`middlewareMode: 'edge'` führt Astro-Middleware auf Netlify Edge-Funktionen aus, anstatt nur zur Build-Zeit für vorgerenderte Seiten. Dies ist nützlich für Weiterleitungen, Zugriffskontrolle und benutzerdefinierte Antwort-Header, die vor der Bereitstellung der Seite angewendet werden müssen.
Hilft der Netlify-Adapter bei Bildern?
Standardmäßig verwendet der Adapter das Netlify Image CDN, um Bilder in Echtzeit zu transformieren, ohne die Build-Zeiten zu erhöhen. Wenn du dieses Verhalten nicht möchtest, kannst du es mit der Option `imageCDN` deaktivieren.