{"id":63047,"date":"2023-06-22T08:36:15","date_gmt":"2023-06-22T07:36:15","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=63047&#038;preview=true&#038;preview_id=63047"},"modified":"2023-08-18T17:17:25","modified_gmt":"2023-08-18T16:17:25","slug":"astro-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/astro-js\/","title":{"rendered":"Was ist Astro? Eine Einf\u00fchrung in den beliebten Static Site Generator"},"content":{"rendered":"<p>Die Webentwicklung hat sich seit den Anf\u00e4ngen der statischen, einseitigen pers\u00f6nlichen Websites stark weiterentwickelt. Heute k\u00f6nnen wir aus einer Vielzahl von Sprachen, Frameworks und <a href=\"https:\/\/kinsta.com\/de\/blog\/content-management-system\/\">Content-Management-Systemen<\/a> w\u00e4hlen, die f\u00fcr jede erdenkliche Nische entwickelt wurden.<\/p>\n<p>Hier kommt Astro ins Spiel, eines der neuesten cool Kids auf dem JavaScript-Framework-Block.<\/p>\n<p>Astro wurde von Fred K. Schott und einer Gruppe von Mitwirkenden entwickelt und hat sich schnell zu einem Favoriten in der Entwicklergemeinschaft entwickelt. Es ist ein All-in-One-Framework, das \u00e4hnlich wie ein statischer Website-Generator funktioniert.<\/p>\n<p>In diesem Artikel erkl\u00e4ren wir, warum so viele Entwickler Astro sch\u00e4tzen und es anderen L\u00f6sungen vorziehen. Au\u00dferdem zeigen wir dir, wie du mit dem Framework einen Markdown-basierten Blog erstellen kannst.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Was ist Astro?<\/h2>\n<figure style=\"width: 600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/astro-logo.png\" alt=\"Das Astro-Logo in Schwarz, das \"Astro\" in Kleinbuchstaben zeigt, dem ein stilisiertes gro\u00dfes \"A\" mit einer kleinen Flamme darunter vorangestellt ist\" width=\"600\" height=\"157\"><figcaption class=\"wp-caption-text\">Astro<\/figcaption><\/figure>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/svelte-statischer-seiten-generator\/#2-astro\">Astro<\/a>, oder Astro.js, ist ein beliebter <a href=\"https:\/\/kinsta.com\/de\/blog\/statische-webseiten-generatoren\/\">Generator f\u00fcr statische Websites<\/a>, der f\u00fcr diejenigen konzipiert wurde, die inhaltsreiche Websites erstellen wollen, die schnell und reibungslos funktionieren. Sein geringes Gewicht, seine intuitive Struktur und seine leichte Erlernbarkeit machen ihn f\u00fcr Entwickler aller Erfahrungsstufen attraktiv.<\/p>\n<p>Trotz seines geringen Platzbedarfs verf\u00fcgt Astro \u00fcber leistungsstarke Tools, die die Flexibilit\u00e4t deiner Website drastisch erh\u00f6hen und dir viel Zeit bei der Verwaltung von Inhalten und Themes sparen. Dar\u00fcber hinaus haben Entwickler die M\u00f6glichkeit, mit ihren bevorzugten Frameworks in Verbindung mit Astro zu arbeiten &#8211; eine attraktive Perspektive f\u00fcr erfahrene Programmierer, die bereits eine Reihe von Favoriten haben.<\/p>\n<p>Hier sind nur einige der M\u00f6glichkeiten, mit denen sich Astro von der Masse abhebt:<\/p>\n<ul>\n<li><strong>Inselarchitektur:<\/strong> Astro zerlegt deine Benutzeroberfl\u00e4che (UI) in kleinere, isolierte Komponenten, die so genannten &#8222;Astro-Inseln&#8220;, die auf jeder Seite verwendet werden k\u00f6nnen. Nicht ben\u00f6tigtes JavaScript wird durch schlankes HTML ersetzt.<\/li>\n<li><strong>Zero JavaScript (standardm\u00e4\u00dfig):<\/strong> Du kannst zwar so viel JavaScript verwenden, wie du willst, um deine Websites zu erstellen, aber Astro versucht, null JavaScript in der Produktion einzusetzen, indem es deinen Code f\u00fcr dich umschreibt. Dies ist der perfekte Ansatz, wenn dein Fokus auf der Geschwindigkeit deiner Website liegt.<\/li>\n<li><strong>SSG und SSR inklusive:<\/strong> Astro begann als statischer Website-Generator, aber im Laufe der Zeit wurde es zu einem Framework, das sowohl statische Website-Generierung (SSG) als auch <a href=\"https:\/\/kinsta.com\/de\/blog\/web-anwendungs-architektur\/#serversiderendered-architecture\">serverseitiges Rendering (SSR)<\/a> nutzt. Und du kannst ausw\u00e4hlen, welche Seiten welchen Ansatz verwenden sollen.<\/li>\n<li><strong>Framework-agnostisch: <\/strong>Wenn du Astro verwendest, kannst du jedes <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/\">JavaScript-Framework<\/a> nutzen, das du m\u00f6chtest &#8211; sogar mehrere Frameworks gleichzeitig. (Darauf gehen wir sp\u00e4ter in diesem Artikel noch genauer ein.)<\/li>\n<\/ul>\n<p>Au\u00dferdem ist Astro &#8222;edge-ready&#8220;, das hei\u00dft, es kann jederzeit und \u00fcberall problemlos eingesetzt werden.<\/p>\n<p>Bist du bereit, mehr zu erfahren? Dann lass uns genauer untersuchen, wie Astro funktioniert.<\/p>\n<h2>Die Struktur von Astro<\/h2>\n<p>Bevor wir uns weiter vorwagen, ist es wichtig zu verstehen, wie Astro aufgebaut ist, damit du es effektiv nutzen kannst. Werfen wir einen Blick auf die grundlegende Dateistruktur von Astro:<\/p>\n<pre><code>\u251c\u2500\u2500 dist\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u251c\u2500\u2500 layouts\/\n\u2502   \u2514\u2500\u2500 pages\/\n\u2502       \u2514\u2500\u2500 index.astro\n\u251c\u2500\u2500 public\/\n\u2514\u2500\u2500 package.json<\/code><\/pre>\n<p>Wie du siehst, ist die Struktur selbst recht einfach. Dennoch gibt es einige wichtige Punkte, die du dir merken solltest:<\/p>\n<ul>\n<li>Der gr\u00f6\u00dfte Teil unseres Projekts befindet sich im Ordner <strong>src<\/strong>. Du kannst deine Komponenten, Layouts und Seiten in Unterordnern anordnen. Du kannst weitere Ordner hinzuf\u00fcgen, um dein Projekt \u00fcbersichtlicher zu gestalten.<\/li>\n<li>Der Ordner <strong>public<\/strong> enth\u00e4lt alle Dateien, die au\u00dferhalb des Erstellungsprozesses liegen, z. B. Schriftarten, Bilder oder eine <strong>robots.txt<\/strong>-Datei.<\/li>\n<li>Der Ordner <strong>dist<\/strong> enth\u00e4lt alle Inhalte, die du auf deinem Produktionsserver bereitstellen willst.<\/li>\n<\/ul>\n<p>Als N\u00e4chstes wollen wir uns die Hauptbestandteile von Astro genauer ansehen: Komponenten, Layouts und Seiten.<\/p>\n<h3>Komponenten<\/h3>\n<p>Komponenten sind wiederverwendbare Code-Bausteine, die du \u00fcberall auf deiner Website einbauen kannst, \u00e4hnlich wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-shortcodes\/\">Shortcodes in WordPress<\/a>. Standardm\u00e4\u00dfig haben sie die Dateierweiterung <strong>.astro<\/strong>, aber du kannst auch Komponenten verwenden, die nicht mit Astro, sondern mit <a href=\"https:\/\/kinsta.com\/de\/blog\/vue-js\/\">Vue<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/react-static-site-generators\/#4-astro\">React<\/a>, Preact oder <a href=\"https:\/\/kinsta.com\/de\/blog\/svelte-statischer-seiten-generator\/#2-astro\">Svelte<\/a> erstellt wurden.<\/p>\n<p>Im Folgenden siehst du ein Beispiel daf\u00fcr, wie eine einfache Komponente aussieht &#8211; in diesem Fall ein klassifizierter <code>div<\/code> Tag, der ein <code>h2<\/code> enth\u00e4lt:<\/p>\n<pre><code class=\"language-html\"><!-- src\/components\/Kinsta.astro -->\n&lt;div class=\"kinsta_component\"&gt;\n    &lt;h2&gt;Hello, Kinsta!&lt;\/h2&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Und hier sehen wir, wie wir diese Komponente in unsere Website einbinden k\u00f6nnen:<\/p>\n<pre><code class=\"language-jsx\">---\nimport KinstaComponent from ..\/components\/Kinsta.astro\n---\n&lt;div&gt;\n    &lt;KinstaComponent \/&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Wie oben gezeigt, musst du die Komponente zun\u00e4chst importieren. Erst dann kann sie in die Seite eingebunden werden.<\/p>\n<p>Jetzt ist es an der Zeit, unserer Komponente einige Eigenschaften hinzuzuf\u00fcgen. Beginnen wir mit der Eigenschaft <code>{title}<\/code>:<\/p>\n<pre><code class=\"language-jsx\">---\nconst { title = 'Hello' } = Astro.props\n---\n\n&lt;div class=\"kinsta_component\"&gt;\n    &lt;h2&gt;{title}&lt;\/h2&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Und so w\u00fcrde unsere Eigenschaft implementiert werden:<\/p>\n<pre><code class=\"language-jsx\">---\nimport KinstaComponent from ..\/components\/Kinsta.astro\n---\n\n&lt;div&gt;\n    <!-- This shows \"Good day\" -->\n    &lt;KinstaComponent title=\"Good day\"\/&gt;\n\n    <!-- This shows \"Hello\" -->\n    &lt;KinstaComponent \/&gt;\n &lt;\/div&gt;<\/code><\/pre>\n<p>Ganz einfach, oder?<\/p>\n<p>Wie du wahrscheinlich schon gemerkt hast, liegt die wahre St\u00e4rke der Astro-Komponenten in ihrer globalen und wiederverwendbaren Natur. Sie erm\u00f6glichen es dir, mit nur wenigen Zeilen Code umfassende \u00c4nderungen an deiner gesamten Website vorzunehmen, was dir unz\u00e4hlige Stunden ersparen kann, die du sonst mit m\u00fchsamen Texterneuerungen verbringen m\u00fcsstest.<\/p>\n<h3>Layouts<\/h3>\n<p>Lass uns jetzt \u00fcber Layouts sprechen. Neben ihrer bekannten thematischen Funktion sind Layouts in Astro auch wiederverwendbare Komponenten, aber sie werden als Code-Wrapper eingesetzt.<\/p>\n<p>Sieh dir dieses Beispiel an:<\/p>\n<pre><code class=\"language-jsx\">---\n\/\/ src\/layouts\/Base.astro\nconst { pageTitle = 'Hello world' } = Astro.props\n---\n\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width\"&gt;\n    &lt;title&gt;{pageTitle}&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;main&gt;\n        &lt;slot \/&gt;\n    &lt;\/main&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Beachte hier den <code>&lt;slot \/&gt;<\/code> Tag. Das Element <code>&lt;slot \/&gt;<\/code> dient in Astro als Platzhalter f\u00fcr die eigentlichen HTML-Tags und Inhalte.<\/p>\n<p>Schauen wir es uns in Aktion an.<\/p>\n<p>Der folgende Code zeigt, wie unser <code>&lt;slot \/&gt;<\/code> Tag durch den gew\u00fcnschten Code ersetzt wird, der von unserem <strong>Base.astro<\/strong> Layout umschlossen wird:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/layouts\/Base.astro';\n---\n\n&lt;Base title=\"Hello world\"&gt;\n    &lt;div&gt;\n        &lt;p&gt;Some example text.&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>Wie du sehen kannst, wurde unser <code>&lt;slot \/&gt;<\/code> Tag durch den HTML-Code ersetzt, den es darstellt:<\/p>\n<pre><code class=\"language-html\">&lt;div&gt;\n    &lt;p&gt;Some example text.&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Wie du siehst, kannst du mit Layouts, genau wie mit Komponenten, Teile des Codes auf deiner gesamten Website wiederverwenden, was die Aktualisierung deines globalen Inhalts und Designs vereinfacht.<\/p>\n<h3>Seiten<\/h3>\n<p>Seiten sind eine besondere Art von Komponenten, die f\u00fcr das Routing, das Laden von Daten und die Erstellung von Vorlagen zust\u00e4ndig sind.<\/p>\n<p>Astro verwendet ein dateibasiertes Routing, um Seiten zu erstellen, und kein dynamisches Routing. Die dateibasierte Methode verbraucht nicht nur weniger Bandbreite, sondern erspart dir auch den manuellen Import deiner Komponenten.<\/p>\n<p>Hier ist ein Beispiel f\u00fcr definierte Routen:<\/p>\n<pre><code class=\"language-html\">src\/pages\/index.astro =&gt; yourdomain.com\nsrc\/pages\/test.astro =&gt; domain.com\/test\nsrc\/pages\/test\/subpage =&gt; domain.com\/test\/subpage<\/code><\/pre>\n<p>Mit diesen Routen w\u00fcrde unsere resultierende Homepage wie folgt gerendert werden:<\/p>\n<pre><code class=\"language-html\"><!-- src\/pages\/index.astro -->\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width\"&gt;\n    &lt;title&gt;Hello World&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Hello, Kinsta&lt;\/h1&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Aber wir wissen bereits, wie man Layouts verwendet, also lass uns das in etwas umwandeln, das global zug\u00e4nglich ist:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/layouts\/Base.astro';\n---\n\n&lt;Base&gt;\n    &lt;h1&gt;Hello, Kinsta&lt;\/h1&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>So &#8211; das ist viel sauberer.<\/p>\n<p>Auf das Routing in Astro werden wir sp\u00e4ter in diesem Artikel noch genauer eingehen, aber jetzt wollen wir uns erst einmal dem eigentlichen Thema widmen: dem Aufbau und der Anpassung von Websites.<\/p>\n<h2>Anpassen und Erweitern von Astro<\/h2>\n<p>Es ist an der Zeit zu lernen, wie du deine Astro-Site anpasst! Wir werden Markdown-Sammlungen, Routing, Bildbearbeitung und eine Integration mit React nutzen, um unsere statische Website zu erstellen und zu personalisieren.<\/p>\n<h3>Markdown-Sammlungen<\/h3>\n<p>Mit der Version 2.0 hat Astro eine viel bessere M\u00f6glichkeit <a href=\"https:\/\/astro.build\/blog\/astro-2\/#automatic-type-safety-for-markdown--mdx\" target=\"_blank\" rel=\"noopener noreferrer\">eingef\u00fchrt<\/a>, Markdown-Inhalte zu pflegen als zuvor. Dank der Sammlungen k\u00f6nnen wir sicher sein, dass alle unsere Frontmatter-Daten enthalten sind und die richtige Art der Verkn\u00fcpfung haben.<\/p>\n<p>Seit der Version 2.5 <a href=\"https:\/\/astro.build\/blog\/astro-250\/\" target=\"_blank\" rel=\"noopener noreferrer\">k\u00f6nnen auch JSON- und YAML-Dateien<\/a> als Collections verwaltet werden.<\/p>\n<p>Bist du bereit, dir die H\u00e4nde schmutzig zu machen?<\/p>\n<p>Lege zun\u00e4chst alle deine Markdown-Artikel im Ordner <strong>src\/content\/collection_name<\/strong> ab. Wir werden f\u00fcr dieses Projekt eine Blog-Sammlung erstellen, also wird der Ordner in unserer Demonstration <strong>src\/content\/blog<\/strong> hei\u00dfen.<\/p>\n<p>Nun ist es an der Zeit, alle erforderlichen Frontmatter-Felder in unserer Datei <strong>src\/content\/config.ts<\/strong> zu definieren. Unser Blog ben\u00f6tigt die folgenden Angaben:<\/p>\n<ul>\n<li><code>title<\/code> (string)<\/li>\n<li><code>tags<\/code> (Array)<\/li>\n<li><code>publishDate<\/code> (Zeit)<\/li>\n<li><code>image<\/code> (String, optional)<\/li>\n<\/ul>\n<p>So sieht das Ganze zusammengesetzt aus:<\/p>\n<pre><code class=\"language-jsx\">import { z, defineCollection } from 'astro:content';\n\nconst blogCollection = defineCollection({ \n    schema: z.object({\n        title: z.string(),\n        tags: z.array(z.string()),\n        image: z.string().optional(),\n        publishDate: z.date(),\n    }),\n});\n\nexport const collections = {\n    'blog': blogCollection,\n};<\/code><\/pre>\n<p>Und so sieht unsere Markdown-Datei <strong>article-about-astro.md<\/strong> aus:<\/p>\n<pre><code class=\"language-markdown\">---\ntitle: Article about Astro\ntags: [tag1, tag3]\npublishDate: 2023-03-01\n---\n## Tamen risit\n\nLorem *markdownum flumina*, laceraret quodcumque Pachyne, **alter** enim\ncadavera choro.<\/code><\/pre>\n<p>Zugegeben, es gibt nichts Besonderes an unserer Markdown-Datei. Aber es gibt hier eine versteckte Magie, die sich zeigt, wenn wir einen Tippfehler machen.<\/p>\n<p>Nehmen wir zum Beispiel an, dass wir statt <code>publishDate<\/code> versehentlich <code>publishData<\/code> getippt haben. Im Falle eines solchen Schreibfehlers gibt Astro eine Fehlermeldung aus:<\/p>\n<pre><code class=\"language-bash\">blog \u2192 article-about-astro.md frontmatter does not match collection schema.\n  \"publishDate\" is required.<\/code><\/pre>\n<p>Erstaunlich, oder? Mit dieser raffinierten Funktion k\u00f6nnen wir in Sekundenschnelle Fehler in Bezug auf das Frontmatter finden.<\/p>\n<p>Als Letztes m\u00fcssen wir eine Seite hinzuf\u00fcgen, die unsere Daten anzeigt. Dazu erstellen wir eine Datei unter <strong>src\/page\/blog\/[slug].astro<\/strong> mit dem folgenden Code:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/..\/layouts\/Base.astro';\nimport { getCollection } from 'astro:content';\nexport async function getStaticPaths() {\n    const blogEntries = await getCollection('blog');\n    return blogEntries.map(entry =&gt; ({\n        params: { slug: entry.slug }, props: { entry },\n  }));\n}\nconst { entry } = Astro.props;\nconst { Content } = await entry.render();\n---\n&lt;Base&gt;\n    &lt;h1&gt;{entry.data.title} &lt;\/h1&gt;\n    &lt;Content \/&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>Dank <code>getStaticPaths<\/code> wird Astro alle statischen Seiten f\u00fcr jeden Beitrag in der Blog-Sammlung erstellen.<\/p>\n<p>Das Einzige, was uns jetzt noch fehlt, ist eine Auflistung aller unserer Artikel:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/..\/layouts\/Base.astro';\n\nimport { getCollection } from 'astro:content';\nconst blogEntries = await getCollection('blog');\n---\n&lt;Base&gt;\n&lt;ul&gt;\n    {blogEntries.map(item =&gt; &lt;li&gt; &lt;strong&gt;&lt;a href={'\/blog\/' + item.slug}&gt;{item.data.title}&lt;\/a&gt;&lt;\/strong&gt;&lt;\/li&gt;)}\n&lt;\/ul&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>Wie du siehst, macht die Verwendung von Sammlungen diese Aufgabe bemerkenswert einfach.<\/p>\n<p>Jetzt wollen wir eine Datentypsammlung erstellen. Zuerst m\u00fcssen wir die Datei <strong>src\/content\/config.ts <\/strong>erneut \u00f6ffnen und eine neue Datensammlung hinzuf\u00fcgen:<\/p>\n<pre><code class=\"language-jsx\">import { z, defineCollection, referenece } from 'astro:content';\n\nconst blogCollection = defineCollection({ \n\ttype: 'content',\n    schema: z.object({\n        title: z.string(),\n        tags: z.array(z.string()),\n        image: z.string().optional(),\n        publishDate: z.date(),\n\t    author: reference('authors')\n    }),\n});\n\nconst authorsCollection = defineCollection({ \n\ttype: 'data',\n    schema: z.object({\n        fullName: z.string(),\n        country: z.string()\n    }),\n});\n\n\nexport const collections = {\n    'blog': blogCollection,\n'authors': authorsCollection,\n};<\/code><\/pre>\n<p>Wir haben nicht nur eine neue Sammlung angelegt, sondern auch die <strong>Autorenreferenz<\/strong> in der <strong>blogCollection<\/strong> hinzugef\u00fcgt.<\/p>\n<p>Zeit, einen neuen Autor zu erstellen. Wir m\u00fcssen eine Datei namens <strong>maciek-palmowski.json<\/strong> in der content\/authors.json erstellen:<\/p>\n<pre><code class=\"language-jsx\">{\n    \"fullName\": \"Maciek Palmowski\",\n    \"country\": \"Poland\"\n}<\/code><\/pre>\n<p>Als Letztes m\u00fcssen wir diese Daten in unserem Post abrufen. Dazu m\u00fcssen wir <a href=\"https:\/\/docs.astro.build\/en\/reference\/api-reference\/#getentry\" target=\"_blank\" rel=\"noopener noreferrer\">getEntry<\/a> verwenden:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/..\/layouts\/Base.astro';\nimport { getCollection, getEntry } from 'astro:content';\nexport async function getStaticPaths() {\n  const blogEntries = await getCollection('blog');\n  return blogEntries.map(entry =&gt; ({\n    params: { slug: entry.slug }, props: { entry },\n  }));\n}\nconst { entry } = Astro.props;\nconst author = await getEntry(entry.data.author);\nconst { Content } = await entry.render();\n---\n&lt;Base&gt;\n&lt;h1&gt;{entry.data.title}&lt;\/h1&gt;\n&lt;h2&gt;Author: {author.data.fullName}&lt;\/h2&gt;\n&lt;Content \/&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<h3>Routing<\/h3>\n<p>Astro hat zwei verschiedene Routing-Modi. Den ersten &#8211; das statische (dateibasierte) Routing &#8211; haben wir bereits kennengelernt, als wir die Seiten behandelt haben.<\/p>\n<p>Jetzt werden wir uns auf das dynamische Routing konzentrieren.<\/p>\n<p>Mit dynamischen Routing-Parametern kannst du eine Astro-Seitendatei anweisen, mehrere Seiten mit der gleichen Struktur automatisch zu erstellen. Das ist n\u00fctzlich, wenn du viele Seiten eines bestimmten Typs hast (z. B. Autorenbiografien, Benutzerprofile, Dokumentationsartikel usw.).<\/p>\n<p>In unserem n\u00e4chsten Beispiel werden wir Bioseiten f\u00fcr unsere Autoren erstellen.<\/p>\n<p>Im standardm\u00e4\u00dfigen statischen Ausgabemodus von Astro werden diese Seiten zum Zeitpunkt der Erstellung erzeugt, d.h. du musst die Liste der Autoren, die eine entsprechende Datei erhalten, vorher festlegen. Im dynamischen Modus hingegen werden die Seiten auf Anfrage f\u00fcr jede Route erstellt, die \u00fcbereinstimmt.<\/p>\n<p>Wenn du eine Variable als Dateinamen \u00fcbergeben willst, f\u00fcge sie in Klammern hinzu:<\/p>\n<pre><code class=\"language-html\">pages\/blog\/[slug].astro -&gt; blog\/test, blog\/about-me <\/code><\/pre>\n<p>Lass uns das anhand des Codes aus unserer <strong>src\/page\/blog\/[slug]<\/strong> -Datei genauer betrachten:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/..\/layouts\/Base.astro';\nimport { getCollection } from 'astro:content';\nexport async function getStaticPaths() {\n    const blogEntries = await getCollection('blog');\n    return blogEntries.map(entry =&gt; ({\n        params: { slug: entry.slug }, props: { entry },\n  }));\n}\nconst { entry } = Astro.props;\nconst { Content } = await entry.render();\n---\n&lt;Base&gt;\n    &lt;h1&gt;{entry.data.title}&lt;\/h1&gt;\n    &lt;Content \/&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>Die <code>getStaticPaths<\/code> Route ist f\u00fcr die Erstellung aller statischen Seiten verantwortlich. Sie gibt zwei Objekte zur\u00fcck:<\/p>\n<ul>\n<li><strong><code>params<\/code><\/strong><strong>:<\/strong> Sie wird verwendet, um die Klammern in unseren URLs zu f\u00fcllen<\/li>\n<li><strong><code>props<\/code><\/strong><strong>:<\/strong> Alle Werte, die wir an die Seite \u00fcbergeben<\/li>\n<\/ul>\n<p>Und damit ist die Seitenerstellung erledigt.<\/p>\n<h3>Umgang mit Bildern<\/h3>\n<p>Wir k\u00f6nnen nicht \u00fcber performante Websites sprechen, ohne <a href=\"https:\/\/kinsta.com\/de\/blog\/bilddateitypen\/\">moderne Bildformate<\/a>, korrekte Methoden zur Gr\u00f6\u00dfenanpassung und Lazy Loading zu erw\u00e4hnen.<\/p>\n<p>Zum Gl\u00fcck hat Astro auch hier f\u00fcr uns gesorgt. Dank des Pakets <code>@astrojs\/image<\/code> k\u00f6nnen wir all diese Dinge in wenigen Minuten einf\u00fchren.<\/p>\n<p>Nach der <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/image\/\">Installation des Pakets<\/a> erhalten wir Zugang zu zwei Komponenten: <code>Image<\/code> und <code>Picture<\/code>.<\/p>\n<p>Die Komponente <code>Image<\/code> wird verwendet, um einen optimierten <code>&lt;img \/&gt;<\/code> Tag zu erstellen. Hier ist ein Beispiel:<\/p>\n<pre><code class=\"language-jsx\">---\nimport { Image } from '@astrojs\/image\/components';\nimport heroImage from '..\/assets\/hero.png';\n---\n\n&lt;Image src={heroImage} format=\"avif\" alt=\"descriptive text\" \/&gt;\n&lt;Image src={heroImage} width={300} alt=\"descriptive text\" \/&gt;\n&lt;Image src={heroImage} width={300} height={600} alt=\"descriptive text\" \/&gt;<\/code><\/pre>\n<p>Mit der Komponente <code>Picture<\/code> wird eine optimierte <code>&lt;picture\/&gt;<\/code> Komponente erstellt:<\/p>\n<pre><code class=\"language-jsx\">---\nimport { Picture } from '@astrojs\/image\/components';\nimport hero from '..\/assets\/hero.png';\n---\n&lt;Picture src={hero} widths={[200, 400, 800]} sizes=\"(max-width: 800px) 100vw, 800px\" alt=\"descriptive text\" \/&gt;<\/code><\/pre>\n<h3>SSG vs. SSR<\/h3>\n<p>Standardm\u00e4\u00dfig l\u00e4uft Astro als statischer Website-Generator. Das bedeutet, dass der gesamte Inhalt in statische HTML-Seiten umgewandelt wird.<\/p>\n<p>Obwohl dies in vielerlei Hinsicht ein perfekter Ansatz ist (vor allem in Bezug auf die Geschwindigkeit), w\u00fcrden wir manchmal einen dynamischeren Ansatz vorziehen. Wenn du z. B. f\u00fcr jeden Nutzer eine eigene Profilseite haben m\u00f6chtest oder wenn du Tausende von Artikeln auf deiner Seite hast, w\u00e4re es viel zu zeitaufw\u00e4ndig, alles jedes Mal neu zu rendern.<\/p>\n<p>Gl\u00fccklicherweise kann Astro auch als vollst\u00e4ndig serverseitig gerendertes Framework oder in einem Hybridmodus zwischen beiden arbeiten.<\/p>\n<p>Um seitenweite SSR zu aktivieren, m\u00fcssen wir den folgenden Code in <strong>astro.config.mjs<\/strong> einf\u00fcgen:<\/p>\n<pre><code class=\"language-jsx\">import { defineConfig } from 'astro\/config';\n\nexport default defineConfig({\n    output: 'server'\n});<\/code><\/pre>\n<p>Dies ist der Standardansatz.<\/p>\n<p>Der hybride Ansatz bedeutet, dass standardm\u00e4\u00dfig alles dynamisch generiert wird, mit Ausnahme der Seiten, denen <code>export const prerender = true<\/code> hinzugef\u00fcgt wurde.<\/p>\n<p>Mit Astro 2.5 gibt es auch die M\u00f6glichkeit, <a href=\"https:\/\/astro.build\/blog\/astro-250\/#static-by-default-hybrid-rendering-experimental\" target=\"_blank\" rel=\"noopener noreferrer\">statisches Rendering als Standard einzustellen und dynamische Routen manuell auszuw\u00e4hlen<\/a>.<\/p>\n<p>Damit k\u00f6nnen wir zum Beispiel eine vollst\u00e4ndig statisch generierte Website mit dynamischen Login- und Profilseiten erstellen. Toll, oder?<\/p>\n<p>Mehr dar\u00fcber kannst du in der <a href=\"https:\/\/docs.astro.build\/en\/guides\/server-side-rendering\/\" target=\"_blank\" rel=\"noopener noreferrer\">offiziellen Dokumentation<\/a> nachlesen.<\/p>\n<h3>Andere JavaScript-Frameworks einbinden<\/h3>\n<p>Eine weitere tolle Funktion von Astro erm\u00f6glicht es dir, dein Lieblingsframework mitzubringen und es zusammen mit Astro zu verwenden. Du kannst Astro mit React, Preact, Svelte, Vue, Solid oder Alpine kombinieren (alle Integrationen findest du in <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">der Astro-Dokumentation &#8222;Integrationen hinzuf\u00fcgen&#8220;<\/a>).<\/p>\n<p>Nehmen wir an, wir wollen React verwenden. Als Erstes m\u00fcssen wir die Integration installieren, indem wir Folgendes in <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-npm\/\">npm<\/a> ausf\u00fchren:<\/p>\n<pre><code class=\"language-jsx\">npx astro add react<\/code><\/pre>\n<p>Jetzt, wo React integriert ist, k\u00f6nnen wir eine React-Komponente erstellen. In unserem Fall wird es die Z\u00e4hlerkomponente unter <strong>src\/components\/ReactCounter.tsx<\/strong> sein:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\n\/** A counter written with React *\/\nexport function Counter({ children }) {\n    const [count, setCount] = useState(0);\n    const add = () =&gt; setCount((i) =&gt; i + 1);\n    const subtract = () =&gt; setCount((i) =&gt; i - 1);\n\n    return (\n        &lt;&gt;\n            &lt;div className=\"counter\"&gt;\n                &lt;button onClick={subtract}&gt;-&lt;\/button&gt;\n                &lt;pre&gt;{count}&lt;\/pre&gt;\n                &lt;button onClick={add}&gt;+&lt;\/button&gt;\n                &lt;\/div&gt;\n            &lt;div className=\"counter-message\"&gt;{children}&lt;\/div&gt;\n        &lt;\/&gt;\n    );\n}<\/code><\/pre>\n<p>Zu guter Letzt m\u00fcssen wir den Z\u00e4hler mit folgendem Code auf unserer Seite platzieren:<\/p>\n<pre><code class=\"language-jsx\">---\nimport * as react from '..\/components\/ReactCounter';\n---\n&lt;main&gt;\n    &lt;react.Counter client:visible \/&gt;\n&lt;\/main&gt;<\/code><\/pre>\n<p>Und voil\u00e0: Deine React-Komponente ist nahtlos in deine Seite integriert.<\/p>\n<h2>Wie man Astro mit Kinsta einsetzt<\/h2>\n<p>Jetzt ist es an der Zeit, unsere Astro-Website ins Netz zu stellen. Zum Gl\u00fcck ist Kinsta der <a href=\"https:\/\/sevalla.com\/application-hosting\/\">perfekte Hoster f\u00fcr eine schnelle und problemlose Bereitstellung<\/a>.<\/p>\n<p>Beginne damit, ein GitHub-Repository f\u00fcr die Dateien deiner Website zu erstellen. Wenn du noch nicht bereit bist, deine eigenen Dateien zu verwenden, kannst du die von unserem Team erstellte <a href=\"https:\/\/github.com\/kinsta\/hello-world-astro\" target=\"_blank\" rel=\"noopener noreferrer\">Vorlage f\u00fcr die Astro-Startseite<\/a> klonen.<\/p>\n<figure style=\"width: 1400px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/kinsta-astro-starter-repo.png\" alt=\"Ein Teil des GitHub-Repos f\u00fcr die Astro-Startseite von Kinsta zeigt ein Bild des wei\u00dfen Astro-\"A\"-Logos, das auf einem rosa und lila Hintergrund schwebt, gefolgt von \"Kinsta - Hello World - Static Site With Astro\".\" width=\"1400\" height=\"1144\"><figcaption class=\"wp-caption-text\">GitHub-Repository der Astro-Startseite von Kinsta<\/figcaption><\/figure>\n<p>Sobald dein Repository fertig ist, <a href=\"https:\/\/my.kinsta.com\/?lang=de\">melde dich bei MyKinsta<\/a> an, w\u00e4hle links <strong>Anwendungen<\/strong> aus und w\u00e4hle dann <strong>Anwendung<\/strong> aus dem lila Dropdown-Men\u00fc <strong>Dienst hinzuf\u00fcgen<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/mykinsta-application-add-service.png\" alt=\"Das MyKinsta-Dashboard \u00f6ffnete sich im Bereich \"Anwendungen\", der ein lila Dropdown-Men\u00fc \"Dienst hinzuf\u00fcgen\" mit zwei Optionen anzeigt: \"Anwendung\" und \"Datenbank\".\" width=\"1600\" height=\"770\"><figcaption class=\"wp-caption-text\">Eine Anwendung in MyKinsta hinzuf\u00fcgen<\/figcaption><\/figure>\n<p>Im letzten Schritt gibst du Kinsta die Details deines Builds und deiner Bereitstellung bekannt.<\/p>\n<p>Auf die meisten Fragen, wie z. B. <strong>Prozessname<\/strong> und <strong>Zahlungsmethode<\/strong>, gibt es eindeutige oder einfache Antworten. Beachte, dass du das Feld <strong>Startbefehl<\/strong> leer lassen kannst, wenn du willst; Kinsta wird dann automatisch <code>npm start<\/code> als Befehl zuweisen.<\/p>\n<p>Wenn du dir unsicher bist, wie du auf andere Fragen antworten sollst, findest du in der Kinsta-Dokumentation <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application\">feldspezifische Anleitungen<\/a> und <a href=\"https:\/\/docs.sevalla.com\/templates\/overview\">Beispiele f\u00fcr die Bereitstellung von Astro<\/a>. Du kannst dir auch die <a href=\"https:\/\/docs.astro.build\/en\/guides\/deploy\/kinsta\/\" target=\"_blank\" rel=\"noopener noreferrer\">Astro-Anleitung f\u00fcr den Einsatz bei Kinsta<\/a> ansehen.<\/p>\n<p>Wenn du die Details deines Builds eingegeben hast, klicke auf die Schaltfl\u00e4che <strong>Zahlungsmethode best\u00e4tigen<\/strong>, um dein Build zu initialisieren.<\/p>\n<p>Und das war&#8217;s! Du hast jetzt eine voll funktionsf\u00e4hige statische Website, die mit dem Astro-Framework erstellt wurde.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/astro-starter-homepage.png\" alt=\"Eine dunkle Seite mit dem Kinsta-Logo in Wei\u00df in der Mitte \u00fcber den Worten \"Willkommen auf deiner neuen Astro-Website\", gefolgt von zwei Reihen von Karten mit den Bezeichnungen \"Offizielle Astro-Website\", \"Astro-Dokumentation\", \"Download-Starter\" und \"Kinsta GitHub\".\" width=\"1600\" height=\"1266\"><figcaption class=\"wp-caption-text\">Unsere Live-Astro-Startseite<\/figcaption><\/figure>\n<p>Du findest deine Live-URL und andere Einsatzdetails unter <strong>Eins\u00e4tze<\/strong> in deinem MyKinsta-Konto.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/astro-deployment-mykinsta.png\" alt=\"Der Bildschirm \" Bereitstellungen\" von MyKinsta zeigt die Details und den Verlauf unserer Astro-Standortbereitstellung.\" width=\"1600\" height=\"987\"><figcaption class=\"wp-caption-text\">Ein erfolgreiche Astro-Bereitstellung<\/figcaption><\/figure>\n<h2>Zusammenfassung<\/h2>\n<p>Die klare Struktur, die einfache Syntax und die globalen Komponenten von Astro machen das Erstellen und Betreiben einer Anwendung wirklich einfach. Seine Leichtgewichtigkeit und die doppelte Nutzung von statischem und dynamischem Routing erh\u00f6hen die Reaktionsf\u00e4higkeit der Website erheblich, w\u00e4hrend seine F\u00e4higkeit, mit anderen JavaScript-Frameworks zu kooperieren, es f\u00fcr erfahrene Programmierer noch attraktiver macht.<\/p>\n<p>Wenn es dein Ziel ist, eine inhaltsreiche Website zu erstellen, die schnell l\u00e4dt, modulare Funktionen bietet und sowohl statisch als auch dynamisch generiert werden kann, dann k\u00f6nnte Astro die richtige Wahl f\u00fcr dich sein.<\/p>\n<p>Du kannst deine statische Website mit dem <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Anwendungs-Hosting von Kinsta kostenlos<\/a> hosten und wenn sie dir gef\u00e4llt, kannst du auf unseren <a href=\"https:\/\/sevalla.com\/pricing\/\">Hobby Tier<\/a> Plan upgraden .<\/p>\n<p>Was denkst du \u00fcber den Astro Generator f\u00fcr statische Websites? Hast du ihn schon f\u00fcr ein eigenes Projekt verwendet? Lass es uns in den Kommentaren unten wissen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Webentwicklung hat sich seit den Anf\u00e4ngen der statischen, einseitigen pers\u00f6nlichen Websites stark weiterentwickelt. Heute k\u00f6nnen wir aus einer Vielzahl von Sprachen, Frameworks und Content-Management-Systemen w\u00e4hlen, &#8230;<\/p>\n","protected":false},"author":283,"featured_media":63048,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[982,945,951,991],"class_list":["post-63047","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-statische-seiten-generatoren","topic-headless-cms","topic-javascript-frameworks","topic-web-entwicklungs-tools"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Was ist Astro? Eine Einf\u00fchrung in den beliebten Static Site Generator - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Erfahre alles \u00fcber Astro, den beliebten Generator f\u00fcr statische Websites, mit dem du inhaltsreiche Websites erstellen kannst, die schnell und reibungslos funktionieren.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/astro-js\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Was ist Astro? Eine Einf\u00fchrung in den beliebten Static Site Generator\" \/>\n<meta property=\"og:description\" content=\"Erfahre alles \u00fcber Astro, den beliebten Generator f\u00fcr statische Websites, mit dem du inhaltsreiche Websites erstellen kannst, die schnell und reibungslos funktionieren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/astro-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-22T07:36:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-18T16:17:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/introduction-to-astro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Maciek Palmowski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Erfahre alles \u00fcber Astro, den beliebten Generator f\u00fcr statische Websites, mit dem du inhaltsreiche Websites erstellen kannst, die schnell und reibungslos funktionieren.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/introduction-to-astro.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maciek Palmowski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"14\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/astro-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/astro-js\/\"},\"author\":{\"name\":\"Maciek Palmowski\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\"},\"headline\":\"Was ist Astro? Eine Einf\u00fchrung in den beliebten Static Site Generator\",\"datePublished\":\"2023-06-22T07:36:15+00:00\",\"dateModified\":\"2023-08-18T16:17:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/astro-js\/\"},\"wordCount\":2430,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/astro-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/introduction-to-astro.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/astro-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/astro-js\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/astro-js\/\",\"name\":\"Was ist Astro? Eine Einf\u00fchrung in den beliebten Static Site Generator - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/astro-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/astro-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/introduction-to-astro.jpg\",\"datePublished\":\"2023-06-22T07:36:15+00:00\",\"dateModified\":\"2023-08-18T16:17:25+00:00\",\"description\":\"Erfahre alles \u00fcber Astro, den beliebten Generator f\u00fcr statische Websites, mit dem du inhaltsreiche Websites erstellen kannst, die schnell und reibungslos funktionieren.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/astro-js\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/astro-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/astro-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/introduction-to-astro.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/introduction-to-astro.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/astro-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript-Frameworks\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/javascript-frameworks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Was ist Astro? Eine Einf\u00fchrung in den beliebten Static Site Generator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\",\"name\":\"Maciek Palmowski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"caption\":\"Maciek Palmowski\"},\"description\":\"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/maciekpalmowski\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Was ist Astro? Eine Einf\u00fchrung in den beliebten Static Site Generator - Kinsta\u00ae","description":"Erfahre alles \u00fcber Astro, den beliebten Generator f\u00fcr statische Websites, mit dem du inhaltsreiche Websites erstellen kannst, die schnell und reibungslos funktionieren.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/astro-js\/","og_locale":"de_DE","og_type":"article","og_title":"Was ist Astro? Eine Einf\u00fchrung in den beliebten Static Site Generator","og_description":"Erfahre alles \u00fcber Astro, den beliebten Generator f\u00fcr statische Websites, mit dem du inhaltsreiche Websites erstellen kannst, die schnell und reibungslos funktionieren.","og_url":"https:\/\/kinsta.com\/de\/blog\/astro-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-06-22T07:36:15+00:00","article_modified_time":"2023-08-18T16:17:25+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/introduction-to-astro.jpg","type":"image\/jpeg"}],"author":"Maciek Palmowski","twitter_card":"summary_large_image","twitter_description":"Erfahre alles \u00fcber Astro, den beliebten Generator f\u00fcr statische Websites, mit dem du inhaltsreiche Websites erstellen kannst, die schnell und reibungslos funktionieren.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/introduction-to-astro.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Maciek Palmowski","Gesch\u00e4tzte Lesezeit":"14\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/astro-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/astro-js\/"},"author":{"name":"Maciek Palmowski","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072"},"headline":"Was ist Astro? Eine Einf\u00fchrung in den beliebten Static Site Generator","datePublished":"2023-06-22T07:36:15+00:00","dateModified":"2023-08-18T16:17:25+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/astro-js\/"},"wordCount":2430,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/astro-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/introduction-to-astro.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/astro-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/astro-js\/","url":"https:\/\/kinsta.com\/de\/blog\/astro-js\/","name":"Was ist Astro? Eine Einf\u00fchrung in den beliebten Static Site Generator - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/astro-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/astro-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/introduction-to-astro.jpg","datePublished":"2023-06-22T07:36:15+00:00","dateModified":"2023-08-18T16:17:25+00:00","description":"Erfahre alles \u00fcber Astro, den beliebten Generator f\u00fcr statische Websites, mit dem du inhaltsreiche Websites erstellen kannst, die schnell und reibungslos funktionieren.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/astro-js\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/astro-js\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/astro-js\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/introduction-to-astro.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/introduction-to-astro.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/astro-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"JavaScript-Frameworks","item":"https:\/\/kinsta.com\/de\/thema\/javascript-frameworks\/"},{"@type":"ListItem","position":3,"name":"Was ist Astro? Eine Einf\u00fchrung in den beliebten Static Site Generator"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072","name":"Maciek Palmowski","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","caption":"Maciek Palmowski"},"description":"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.","url":"https:\/\/kinsta.com\/de\/blog\/author\/maciekpalmowski\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/63047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/283"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=63047"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/63047\/revisions"}],"predecessor-version":[{"id":63463,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/63047\/revisions\/63463"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63047\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63047\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63047\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63047\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63047\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63047\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63047\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63047\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63047\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/63048"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=63047"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=63047"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=63047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}