diff --git a/src/content/docs/de/concepts/islands.mdx b/src/content/docs/de/concepts/islands.mdx index 2aeadd73ad785..c7162615d2904 100644 --- a/src/content/docs/de/concepts/islands.mdx +++ b/src/content/docs/de/concepts/islands.mdx @@ -1,56 +1,56 @@ --- -title: Inselarchitektur -description: Erfahre, wie die Astro-Inselarchitektur dazu beiträgt, dass Websites schnell sind. +title: Architektur der Astro Islands +description: Erfahre, wie die Architektur von Astro's Islands dazu beiträgt, dass Websites schnell sind. i18nReady: true --- import IslandsDiagram from '~/components/IslandsDiagram.astro'; import ReadMore from '~/components/ReadMore.astro'; -Astro hat dazu beigetragen, ein neues Frontend-Architekturmuster namens **Inselarchitektur** zu entwickeln und zu verbreiten. Bei der Inselarchitektur wird der Großteil der Seite als schnelles, statisches HTML gerendert, wobei kleinere „Inseln“ von JavaScript hinzugefügt werden, wenn Interaktivität oder Personalisierung auf der Seite erforderlich ist (z. B. ein Bildkarussell). Dadurch werden die monolithischen JavaScript-Payloads vermieden, die die Reaktionsfähigkeit vieler anderer moderner JavaScript-Webframeworks beeinträchtigen. +Astro hat dazu beigetragen, ein neues Frontend-Architekturmuster namens **Island-Architektur** (Inselarchitektur) zu entwickeln und zu verbreiten. Bei der Island-Architektur wird der Großteil der Seite als schnelles, statisches HTML gerendert, wobei kleinere „Inseln“ von JavaScript hinzugefügt werden, wenn Interaktivität oder Personalisierung auf der Seite erforderlich ist (z. B. ein Bildkarussell). Dadurch werden die monolithischen JavaScript-Payloads vermieden, die die Reaktionsfähigkeit vieler anderer moderner JavaScript-Webframeworks beeinträchtigen. ## Eine kurze Geschichte Der Begriff „Komponenteninsel“ wurde erstmals 2019 von Etsy's Frontend-Architektin [Katie Sylor-Miller](https://sylormiller.com/) geprägt. Diese Idee wurde dann vom Preact-Erfinder Jason Miller am 11. August 2020 erweitert und in [diesem Beitrag](https://jasonformat.com/islands-architecture/) dokumentiert. -> Die allgemeine Idee einer „Insel“-Architektur ist täuschend einfach: Man rendert HTML-Seiten auf dem Server und fügt Platzhalter oder Slots um hochdynamische Bereiche herum ein [...], die dann auf dem Client in kleine, in sich geschlossene Widgets „hydriert“ werden können, die ihr vom Server gerendertes Ausgangs-HTML wiederverwenden. +> Die allgemeine Idee einer „Insel“-Architektur ist täuschend einfach: Man rendert HTML-Seiten auf dem Server und fügt Platzhalter oder Slots um hochdynamische Bereiche herum ein [...], die dann auf dem Client in kleine, in sich geschlossene Widgets „hydratisiert“ werden können, die ihr vom Server gerendertes Ausgangs-HTML wiederverwenden. > - Jason Miller, Erfinder von Preact -Die Technik, auf der dieses Architekturmuster aufbaut, ist auch als **partielle** oder **selektive Hydrierung** bekannt. +Die Technik, auf der dieses Architekturmuster aufbaut, ist auch als **partielle** oder **selektive Hydratation** bekannt. -Im Gegensatz dazu hydrieren und rendern die meisten JavaScript-basierten Web-Frameworks eine gesamte Website als eine große JavaScript-Anwendung (auch bekannt als Single-Page-Application oder SPA). SPAs sind einfach und leistungsstark, leiden aber aufgrund der starken Nutzung von JavaScript auf der Client-Seite unter Leistungsproblemen beim Laden der Seite. +Im Gegensatz dazu hydratatieren und rendern die meisten JavaScript-basierten Web-Frameworks eine gesamte Website als eine große JavaScript-Anwendung (auch bekannt als Single-Page-Application oder SPA). SPAs sind einfach und leistungsstark, leiden aber aufgrund der starken Nutzung von JavaScript auf der Client-Seite unter Leistungsproblemen beim Laden der Seite. SPAs haben ihren Platz, sogar [eingebettet in eine Astro-Seite](/de/guides/migrate-to-astro/from-create-react-app/). Aber SPAs fehlt die Fähigkeit, selektiv und strategisch zu hydrieren, was sie für die meisten Projekte im Web heute zu einer schwerfälligen Wahl macht. -Astro wurde als erstes Mainstream-JavaScript-Webframework mit integrierter selektiver Hydrierung bekannt, welches das von Sylor-Miller geprägte Muster der Komponenteninseln verwendet. Seitdem haben wir Sylor-Millers ursprüngliche Arbeit erweitert und weiterentwickelt, die dazu beigetragen hat, einen ähnlichen Komponenteninsel-Ansatz für dynamisch vom Server gerenderte Inhalte zu inspirieren. +Astro wurde als erstes Mainstream-JavaScript-Webframework mit integrierter selektiver Hydratation bekannt, welches das von Sylor-Miller geprägte Muster der Komponenteninseln verwendet. Seitdem haben wir Sylor-Millers ursprüngliche Arbeit erweitert und weiterentwickelt, die dazu beigetragen hat, einen ähnlichen Komponenteninsel-Ansatz für dynamisch vom Server gerenderte Inhalte zu inspirieren. -## Was ist eine Astro-Insel? +## Was ist ein Astro Island? -In Astro ist eine Insel eine erweiterte UI-Komponente auf einer ansonsten statischen HTML-Seite. +In Astro ist ein Island eine erweiterte UI-Komponente auf einer ansonsten statischen HTML-Seite. -Eine [**Client-Insel**](#client-inseln) ist eine interaktive JavaScript-UI-Komponente, die getrennt vom Rest der Seite hydriert wird, während eine [**Server-Insel**](#server-inseln) eine UI-Komponente ist, die ihren dynamischen Inhalt getrennt vom Rest der Seite auf den Server überträgt. +Ein [**Client-Island**](#client-islands) ist eine interaktive JavaScript-UI-Komponente, die getrennt vom Rest der Seite hydratiert wird, während ein [**Server-Island**](#server-islands) eine UI-Komponente ist, die ihren dynamischen Inhalt getrennt vom Rest der Seite auf den Server überträgt. -Beide Inseln führen teure oder langsamere Prozesse unabhängig voneinander aus, und zwar für jede einzelne Komponente, um das Laden der Seite zu optimieren. +Beide Islands führen teure oder langsamere Prozesse unabhängig voneinander aus, und zwar für jede einzelne Komponente, um das Laden der Seite zu optimieren. -## Inselkomponenten +## Islands sind Komponenten Astro-Komponenten sind die Bausteine für deine Seitenvorlage. Sie werden zu statischem HTML ohne clientseitige Laufzeit gerendert. -Stell dir eine Client-Insel als ein interaktives Widget vor, das in einem Meer von ansonsten statischem, leichtgewichtigem, servergerendertem HTML schwimmt. Server-Inseln können für personalisierte oder dynamische Server-gerenderte Elemente hinzugefügt werden, z. B. für das Profilbild eines eingeloggten Besuchers +Stell dir ein Client-Island als ein interaktives Widget vor, das in einem Meer von ansonsten statischem, leichtgewichtigem, servergerendertem HTML schwimmt. Server-Islands können für personalisierte oder dynamische Server-gerenderte Elemente hinzugefügt werden, z. B. für das Profilbild eines eingeloggten Besuchers. - Header (interaktive Insel) + Header (interaktives Island) Sidebar (statisches HTML) Statische Inhalte wie Text, Bilder, etc. - Bilder­karussell (interaktive Insel) + Bilder­karussell (interaktives Island) Footer (statisches HTML) - Quelle: [Insel­architektur: Jason Miller](https://jasonformat.com/islands-architecture/) + Quelle: [Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/) -Eine Insel läuft immer isoliert von anderen Inseln auf der Seite, und es können mehrere Inseln auf einer Seite existieren. Die Client-Inseln können dennoch ihren „State“ gemeinsam nutzen und miteinander kommunizieren, auch wenn sie in unterschiedlichen Komponenten­kontexten laufen. +Ein Island läuft immer isoliert von anderen Islands auf der Seite, und es können mehrere Islands auf einer Seite existieren. Die Client-Islands können dennoch ihren „State“ gemeinsam nutzen und miteinander kommunizieren, auch wenn sie in unterschiedlichen Komponenten­kontexten laufen. Dank dieser Flexibilität kann Astro mehrere UI-Frameworks wie [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/) und [SolidJS](https://www.solidjs.com/) unterstützen. Da sie unabhängig voneinander sind, kannst du sogar mehrere Frameworks auf einer Seite mischen. @@ -63,9 +63,9 @@ Obwohl die meisten Entwickler nur ein UI-Framework verwenden, unterstützt Astro - Eine bestehende Website schrittweise und ohne Ausfallzeiten auf ein anderes Framework umstellen. ::: -## Client-Inseln +## Client-Islands -Standardmäßig rendert Astro automatisch jede UI-Komponente nur in HTML und CSS und **entfernt automatisch alle clientseitigen JavaScript.** +Standardmäßig rendert Astro automatisch jede UI-Komponente nur in HTML und CSS und **entfernt automatisch alles clientseitige JavaScript.** ```astro title="src/pages/index.astro" @@ -73,7 +73,7 @@ Standardmäßig rendert Astro automatisch jede UI-Komponente nur in HTML und CSS Das mag streng klingen, aber dieses Verhalten sorgt dafür, dass Astro-Websites standardmäßig schnell sind und schützt Entwickler davor, versehentlich unnötiges oder unerwünschtes JavaScript zu senden, das ihre Website verlangsamen könnte. -Um eine beliebige statische UI-Komponente in eine interaktive Insel zu verwandeln, brauchst du nur eine `client:*`-Direktive. Astro baut dann automatisch dein clientseitiges JavaScript auf und bündelt es für eine optimierte Leistung. +Um eine beliebige statische UI-Komponente in ein interaktives Island zu verwandeln, brauchst du nur eine `client:*`-Direktive. Astro baut dann automatisch dein clientseitiges JavaScript auf und bündelt es für eine optimierte Leistung. ```astro title="src/pages/index.astro" ins="client:load"