{"id":53418,"date":"2023-06-22T09:38:31","date_gmt":"2023-06-22T07:38:31","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=53418&#038;preview=true&#038;preview_id=53418"},"modified":"2023-10-20T11:12:32","modified_gmt":"2023-10-20T09:12:32","slug":"astro-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/","title":{"rendered":"Wat is Astro? Een inleiding tot deze populaire statische websitegenerator"},"content":{"rendered":"<p>Webdevelopment heeft een lange weg afgelegd sinds de begindagen van de statische persoonlijke websites met maar \u00e9\u00e9n pagina. Inmiddels hebben we een overvloed aan verschillende talen, frameworks en <a href=\"https:\/\/kinsta.com\/blog\/content-management-system\/\">content management systemen<\/a> om uit te kiezen &#8211; ontworpen voor elke denkbare niche.<\/p>\n<p>Dat is waar Astro om de hoek komt kijken, een van de nieuwkomers op het gebied van JavaScript.<\/p>\n<p>Astro is inmiddels een favoriet geworden in de devcommunity en is gemaakt door Fred K. Schott en een groep andere medewerkers. Het is een alles-in-\u00e9\u00e9n framework dat veel lijkt op een statische sitegenerator.<\/p>\n<p>In dit artikel leggen we uit waarom zoveel developers Astro zo waarderen en het verkiezen boven andere oplossingen. We laten je ook zien hoe je een op markdown gebaseerde blog kunt bouwen met het framework.<\/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>Wat is 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=\"Het Astro-logo in zwart, met \"astro\" in kleine letters voorafgegaan door een gestileerde hoofdletter \"A\" met een kleine vlam eronder.\" width=\"600\" height=\"157\"><figcaption class=\"wp-caption-text\">Astro<\/figcaption><\/figure>\n<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/svelte-statische-site-generator\/#2-astro\">Astro<\/a>, of Astro.js, is een populaire <a href=\"https:\/\/kinsta.com\/blog\/static-site-generator\/\">statische sitegenerator<\/a> die is ontworpen voor diegenen die websites met veel inhoud willen maken die snel en soepel draaien. Het lichte gewicht, de intu\u00eftieve structuur en de lichte leercurve maken het aantrekkelijk voor developers van alle ervaringsniveaus.<\/p>\n<p>Ondanks de kleine afmetingen beschikt Astro over krachtige gereedschappen die de flexibiliteit van je site drastisch vergroten, waardoor je uren kunt besparen op het beheren van inhoud en thema&#8217;s. Daarnaast geeft het ontwikkelaars de optie om met hun favoriete frameworks te werken in combinatie met Astro &#8211; een aantrekkelijk vooruitzicht voor doorgewinterde programmeurs die al een groot aantal favorieten hebben.<\/p>\n<p>Dit zijn slechts een paar van de manieren waarop Astro zich onderscheidt van de rest:<\/p>\n<ul>\n<li><strong>Eilandarchitectuur:<\/strong> Astro splitst je gebruikersinterface (UI) op in kleinere, ge\u00efsoleerde componenten die bekend staan als &#8220;Astro islands&#8221; en die op elke pagina kunnen worden gebruikt. Ongebruikte JavaScript wordt vervangen door lichtgewicht HTML.<\/li>\n<li><strong>Nul JavaScript (standaard):<\/strong> Hoewel je alle JavaScript kunt gebruiken die je wilt om je websites te maken, zal Astro proberen om nul JavaScript in te zetten voor productie door je code voor je te transcriberen. Dit is een perfecte aanpak als je je richt op de snelheid van je site.<\/li>\n<li><strong>SSG en SSR inbegrepen:<\/strong> Astro begon als een statische sitegenerator, maar gaandeweg is het een framework geworden dat zowel statische sitegeneratie (SSG) als <a href=\"https:\/\/kinsta.com\/nl\/blog\/webapplicatie-architectuur\/#serversiderendered-architecture\">server-side rendering (SSR)<\/a> gebruikt. En je kunt zelf kiezen welke pagina&#8217;s welke aanpak gebruiken.<\/li>\n<li><strong>Framework-agnostisch: <\/strong>Als je Astro gebruikt, kun je elk <a href=\"https:\/\/kinsta.com\/nl\/blog\/javascript-bibliotheken\/\">JavaScript framework<\/a> gebruiken dat je wilt &#8211; zelfs meerdere frameworks tegelijk. (We gaan hier later in dit artikel dieper op in)<\/li>\n<\/ul>\n<p>Bovendien is Astro kant-en-klaar, wat betekent dat het overal en altijd gemakkelijk kan worden ingezet.<\/p>\n<p>Klaar voor meer informatie? Laten we dan eens dieper ingaan op hoe Astro werkt.<\/p>\n<h2>De structuur van Astro<\/h2>\n<p>Voordat we verder gaan, is het belangrijk om te begrijpen hoe Astro is opgezet zodat je het effectief kunt gebruiken. Laten we eens kijken naar de basisbestandsstructuur van 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>Zoals je kunt zien, is de structuur zelf vrij eenvoudig. Er zijn echter enkele belangrijke punten die je moet onthouden:<\/p>\n<ul>\n<li>Het grootste deel van ons project is te vinden in de map <strong>src<\/strong>. Je kunt je componenten, layouts en pagina&#8217;s in submappen plaatsen. Ook kun je extra mappen toevoegen om je project overzichtelijker te maken.<\/li>\n<li>De <strong>public<\/strong> map is voor alle bestanden die buiten het bouwproces leven, zoals lettertypen, afbeeldingen of een <strong>robots.txt<\/strong> bestand.<\/li>\n<li>De <strong>dist<\/strong> map bevat alle inhoud die je wilt deployen op je productieserver.<\/li>\n<\/ul>\n<p>Laten we nu dieper ingaan op de belangrijkste onderdelen van Astro: componenten, layouts en pagina&#8217;s.<\/p>\n<h3>Componenten<\/h3>\n<p>Componenten zijn herbruikbare stukjes code die je overal op je website kunt gebruiken, vergelijkbaar met <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-shortcodes\/\">shortcodes in WordPress<\/a>. Standaard hebben ze de bestandsextensie <strong>.astro<\/strong>, maar je kunt ook niet-Astro componenten gebruiken die gebouwd zijn met <a href=\"https:\/\/kinsta.com\/nl\/blog\/vue-js\/\">Vue<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/react-statische-sitegenerator\/#4-astro\">React<\/a>, Preact of <a href=\"https:\/\/kinsta.com\/nl\/blog\/svelte-statische-site-generator\/#2-astro\">Svelte<\/a>.<\/p>\n<p>Hieronder zie je een voorbeeld van hoe een eenvoudig component eruitziet &#8211; in dit geval een geclassificeerde <code>div<\/code> tag met een <code>h2<\/code>:<\/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>En hier zie je hoe we dat component in onze site kunnen opnemen:<\/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>Zoals hierboven is aangetoond, moet je het onderdeel eerst importeren. Pas daarna kan het op de pagina worden opgenomen.<\/p>\n<p>Nu is het tijd om enkele properties aan ons component toe te voegen. Laten we beginnen met een property <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>En hier is hoe onze property zou worden ge\u00efmplementeerd:<\/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>Simpel, toch?<\/p>\n<p>Zoals je je waarschijnlijk al hebt gerealiseerd, ligt de echte kracht van Astro&#8217;s componenten in hun globale en herbruikbare aard. Ze stellen je in staat om ingrijpende veranderingen in je hele site aan te brengen door slechts een paar regels code te bewerken, wat je ontelbare uren kan besparen die je anders zou besteden aan vervelende, moeizame tekstvervangingen.<\/p>\n<h3>Layouts<\/h3>\n<p>Laten we het nu eens hebben over layouts. Naast hun bekende thematische functie zijn layouts in Astro ook herbruikbare componenten, maar ze worden gebruikt als codewrappers.<\/p>\n<p>Kijk eens naar dit voorbeeld:<\/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>Let hier ook op de tag <code>&lt;slot \/&gt;<\/code> . Het <code>&lt;slot \/&gt;<\/code> element in Astro fungeert als een placeholder voor HTML tags en inhoud.<\/p>\n<p>Laten we het eens in actie zien.<\/p>\n<p>De code hieronder laat zien hoe onze tag <code>&lt;slot \/&gt;<\/code> wordt vervangen door de gewenste code, die allemaal wordt ingepakt door onze <strong>Base.astro<\/strong> layout:<\/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>Zoals je kunt zien, is onze tag <code>&lt;slot \/&gt;<\/code> vervangen door de HTML die hij vertegenwoordigt, namelijk:<\/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>Zoals je kunt zien, kun je met layouts, net als met componenten, stukken code hergebruiken op je hele site, waardoor het eenvoudiger wordt om je algemene inhoud en ontwerp bij te werken.<\/p>\n<h3>Pagina&#8217;s<\/h3>\n<p>Pagina&#8217;s zijn een speciaal type component dat verantwoordelijk is voor routing, het laden van gegevens en templating.<\/p>\n<p>Astro gebruikt bestandsgebaseerde routing om pagina&#8217;s te genereren, in plaats van dynamische routing. De bestandsgebaseerde methode verbruikt niet alleen minder bandbreedte, maar bespaart je ook het handmatig importeren van je componenten.<\/p>\n<p>Hier is een voorbeeld van gedefinieerde routes:<\/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>Met deze routes zou onze homepage er als volgt uitzien:<\/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>Maar we weten al hoe we layouts moeten gebruiken, dus laten we dit omzetten in iets dat globaal toegankelijk is:<\/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>Zo, dat is veel strakker.<\/p>\n<p>We zullen later in dit artikel dieper ingaan op routing in Astro, maar nu gaan we verder met het leuke werk: het bouwen en aanpassen van sites.<\/p>\n<h2>Astro aanpassen en uitbreiden<\/h2>\n<p>Het is tijd om te leren hoe je je Astro site kunt aanpassen! We gaan Markdown collecties, routing, afbeeldingsverwerking en een integratie met React gebruiken om onze statische site op te bouwen en te personaliseren.<\/p>\n<h3>Markdown collecties<\/h3>\n<p>Met versie 2.0 <a href=\"https:\/\/astro.build\/blog\/astro-2\/#automatic-type-safety-for-markdown--mdx\" target=\"_blank\" rel=\"noopener noreferrer\">introduceerde<\/a> Astro een veel betere manier om Markdown content te onderhouden dan voorheen. Dankzij collecties kunnen we er zeker van zijn dat al onze frontmatter data is opgenomen en de juiste associatie heeft.<\/p>\n<p>Onlangs, in versie 2.5, hebben ze <a href=\"https:\/\/astro.build\/blog\/astro-250\/\" target=\"_blank\" rel=\"noopener noreferrer\">een mogelijkheid toegevoegd om ook JSON en YAML bestanden te beheren<\/a> als collecties.<\/p>\n<p>Klaar om je handen vuil te maken?<\/p>\n<p>Zet eerst al je Markdown artikelen in de map <strong>src\/content\/collection_name<\/strong>. We gaan voor dit project een blogcollectie maken, dus in onze demonstratie wordt de map <strong>src\/content\/blog<\/strong>.<\/p>\n<p>Nu is het tijd om alle vereiste frontmatter velden te defini\u00ebren in ons <strong>src\/content\/config.ts<\/strong> bestand. Onze blog heeft het volgende nodig:<\/p>\n<ul>\n<li><code>title<\/code> (string)<\/li>\n<li><code>tags<\/code> (array)<\/li>\n<li><code>publishDate<\/code> (tijd)<\/li>\n<li><code>image<\/code> (string, optioneel)<\/li>\n<\/ul>\n<p>Zo ziet het er allemaal samen uit:<\/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>En dit is wat ons <strong>article-about-astro.md<\/strong> Markdown bestand bevat:<\/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>Het klopt dat er niets bijzonders is aan ons Markdown bestand. Maar er is wel wat verborgen magie die zichtbaar wordt als we een typefout maken.<\/p>\n<p>Laten we bijvoorbeeld zeggen dat we in plaats van <code>publishDate<\/code> per ongeluk <code>publishData<\/code> hebben getypt. In het geval van zo&#8217;n spelfout zal Astro een foutmelding geven:<\/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>Verbazingwekkend, toch? Deze handige functie kan ons helpen om fouten met betrekking tot frontmatter in een paar seconden te vinden.<\/p>\n<p>Het laatste dat we moeten toevoegen is een pagina met onze gegevens. Laten we een bestand maken op <strong>src\/page\/blog\/[slug].astro<\/strong> met de volgende 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>Dankzij <code>getStaticPaths<\/code> maakt Astro alle statische pagina&#8217;s voor elk bericht in de blogcollectie.<\/p>\n<p>Het enige wat we nu nog missen is een lijst van al onze artikelen:<\/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>Zoals je kunt zien, maakt het gebruik van collecties deze taak opmerkelijk eenvoudig.<\/p>\n<p>Laten we nu een gegevenstypecollectie maken. Eerst moeten we het bestand <strong>src\/content\/config.ts <\/strong>opnieuw openen en een nieuwe gegevenscollectie toevoegen:<\/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>Naast het maken van een nieuwe collectie , hebben we ook de verwijzing naar <strong>de auteur<\/strong> toegevoegd in de <strong>blogCollection<\/strong>.<\/p>\n<p>Tijd om een nieuwe auteur (author) aan te maken. Hiervoor moeten we een bestand <strong>maciek-palmowski.json<\/strong> maken in de content\/authors.json:<\/p>\n<pre><code class=\"language-jsx\">{\n    \"fullName\": \"Maciek Palmowski\",\n    \"country\": \"Poland\"\n}<\/code><\/pre>\n<p>Het laatste wat we nog moeten doen is deze gegevens ophalen in onze Post. Hiervoor moeten we <a href=\"https:\/\/docs.astro.build\/en\/reference\/api-reference\/#getentry\" target=\"_blank\" rel=\"noopener noreferrer\">getEntry<\/a> gebruiken:<\/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 heeft twee verschillende routeringsmodi. We hebben al geleerd over de eerste &#8211; statische (bestandsgebaseerde) routing &#8211; toen we eerder pagina&#8217;s behandelden.<\/p>\n<p>Nu gaan we onze aandacht verleggen naar dynamisch routen.<\/p>\n<p>Met behulp van dynamische routeparameters kun je een Astro paginabestand opdracht geven om automatisch meerdere pagina&#8217;s met dezelfde structuur te maken. Dit is handig als je veel van \u00e9\u00e9n bepaald type pagina hebt (denk aan auteursbiografie\u00ebn, gebruikersprofielen, documentatieartikelen, enzovoort).<\/p>\n<p>In het volgende voorbeeld gaan we aan de slag met het genereren van biopagina&#8217;s voor onze auteurs.<\/p>\n<p>In Astro&#8217;s standaard statische uitvoermodus worden deze pagina&#8217;s gegenereerd tijdens het bouwen, wat betekent dat je vooraf moet bepalen welke auteurs een corresponderend bestand krijgen. In de dynamische modus daarentegen, worden pagina&#8217;s op verzoek gegenereerd voor elke route die overeenkomt.<\/p>\n<p>Als je een variabele wilt doorgeven als bestandsnaam, voeg er dan haakjes omheen:<\/p>\n<pre><code class=\"language-html\">pages\/blog\/[slug].astro -&gt; blog\/test, blog\/about-me <\/code><\/pre>\n<p>Laten we hier dieper op ingaan aan de hand van de code uit ons <strong>src\/page\/blog\/[slug]<\/strong> bestand:<\/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>De <code>getStaticPaths<\/code> route is verantwoordelijk voor het genereren van alle statische pagina&#8217;s. Hij geeft twee objecten: terug<\/p>\n<ul>\n<li><strong><code>params<\/code><\/strong><strong>:<\/strong> Gebruikt om de haakjes in onze URL&#8217;s te vullen<\/li>\n<li><strong><code>props<\/code><\/strong><strong>:<\/strong> Alle waarden die we doorgeven aan de pagina<\/li>\n<\/ul>\n<p>En daarmee is het genereren van je pagina geregeld.<\/p>\n<h3>Afbeeldingsverwerking<\/h3>\n<p>We kunnen het niet over krachtige websites hebben zonder het te hebben over <a href=\"https:\/\/kinsta.com\/nl\/blog\/bestandstypen-afbeeldingen\/\">moderne afbeeldingsformats<\/a>, correcte methoden om de grootte aan te passen en lazyloaden.<\/p>\n<p>Gelukkig helpt Astro ons hier ook. Dankzij het <code>@astrojs\/image<\/code> pakket kunnen we al het bovenstaande binnen enkele minuten introduceren.<\/p>\n<p>Na <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/image\/\">het installeren van het pakket<\/a> krijgen we toegang tot twee componenten: <code>Image<\/code> en <code>Picture<\/code>.<\/p>\n<p>De component <code>Image<\/code> wordt gebruikt om een geoptimaliseerde tag <code>&lt;img \/&gt;<\/code> te maken. Hier is een voorbeeld:<\/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>Op dezelfde manier cre\u00ebert het <code>Picture<\/code> component een geoptimaliseerd <code>&lt;picture\/&gt;<\/code> component:<\/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>Standaard draait Astro als een statische sitegenerator. Dit betekent dat alle inhoud wordt geconverteerd naar statische HTML pagina&#8217;s.<\/p>\n<p>Hoewel dit vanuit veel oogpunten een perfecte benadering is (vooral met betrekking tot snelheid), geven we soms de voorkeur aan een meer dynamische benadering. Als je bijvoorbeeld voor elke gebruiker een aparte profielpagina wilt, of als je duizenden artikelen op je site hebt, zou het veel te tijdrovend zijn om alles elke keer opnieuw te renderen.<\/p>\n<p>Gelukkig kan Astro ook werken als een volledig server-side gerenderd framework of in een hybride modus tussen de twee.<\/p>\n<p>Om side-wide SSR in te schakelen, moeten we de volgende code toevoegen aan <strong>astro.config.mjs<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import { defineConfig } from 'astro\/config';\n\nexport default defineConfig({\n    output: 'server'\n});<\/code><\/pre>\n<p>Dit is de standaard aanpak.<\/p>\n<p>De hybride aanpak betekent dat standaard alles dynamisch wordt gegenereerd, behalve de pagina&#8217;s met <code>export const prerender = true<\/code> toegevoegd.<\/p>\n<p>Met Astro 2.5 is er ook de mogelijkheid om <a href=\"https:\/\/astro.build\/blog\/astro-250\/#static-by-default-hybrid-rendering-experimental\" target=\"_blank\" rel=\"noopener noreferrer\">statische rendering als standaard in te stellen en dynamische routes handmatig te selecteren<\/a>.<\/p>\n<p>Hierdoor kunnen we bijvoorbeeld een volledig statisch gegenereerde website maken met dynamische aanmeldings- en profielpagina&#8217;s. Leuk!<\/p>\n<p>Je kunt hier meer over lezen in de <a href=\"https:\/\/docs.astro.build\/en\/guides\/server-side-rendering\/\" target=\"_blank\" rel=\"noopener noreferrer\">offici\u00eble documentatie<\/a>.<\/p>\n<h3>Andere JavaScript frameworks integreren<\/h3>\n<p>Een andere geweldige feature van Astro maakt het mogelijk om je favoriete framework mee te nemen en het te gebruiken in combinatie met Astro. Je kunt Astro mixen met React, Preact, Svelte, Vue, Solid of Alpine (voor alle integraties, zie <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">Astro&#8217;s &#8220;Adding integrations&#8221; documentatie<\/a>).<\/p>\n<p>Laten we zeggen dat we React willen gebruiken. Eerst moeten we de integratie installeren door het volgende uit te voeren in <a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">npm<\/a>:<\/p>\n<pre><code class=\"language-jsx\">npx astro add react<\/code><\/pre>\n<p>Nu React is ge\u00efntegreerd, kunnen we een React component maken. In ons geval wordt dat het counter component in <strong>src\/components\/ReactCounter.tsx<\/strong>:<\/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>Last but not least moeten we de teller op onze pagina plaatsen met de volgende code:<\/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>En voil\u00e0: je React component is naadloos ge\u00efntegreerd in je site.<\/p>\n<h2>Astro deployen met Kinsta<\/h2>\n<p>Nu is het tijd om onze Astro site op het web te zetten. Gelukkig is Kinsta de perfecte host voor snelle en probleemloze <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Statische Site Hosting<\/a>.<\/p>\n<p>Begin met het maken van een GitHub repository voor de bestanden van je site. Als je nog niet klaar bent om je eigen bestanden te gebruiken, kun je deze <a href=\"https:\/\/github.com\/kinsta\/hello-world-astro\" target=\"_blank\" rel=\"noopener noreferrer\">Astro startsitetemplate<\/a> klonen die ons team heeft gemaakt.<\/p>\n<p>Zodra je repo klaar is, volg je deze stappen om je statische site te deployen naar Kinsta:<\/p>\n<ol>\n<li>Login of maak een account aan om je <a href=\"https:\/\/my.kinsta.com\/?lang=nl\">MyKinsta&#8217;s<\/a> dashboard te bekijken.<\/li>\n<li>Autoriseer Kinsta met je Git provider.<\/li>\n<li>Klik op <strong>Statische sites<\/strong> in de linker zijbalk, klik dan op <strong>Site toevoegen<\/strong>.<\/li>\n<li>Selecteer de repository en de branch waarvan je wilt deployen.<\/li>\n<li>Geef je site een unieke naam.<\/li>\n<li>Voeg de build instellingen toe in het volgende format:\n<ul>\n<li><strong>Build commando:<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Node versie:<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>Publish directory:<\/strong> <code>dist<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Klik ten slotte op <strong>Site maken<\/strong>.<\/li>\n<\/ol>\n<p>En dat is het! Je hebt nu een live, volledig functionerende statische site gemaakt met het Astro framework.<\/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=\"Een donkere pagina met het Kinsta logo in het wit in het midden boven de woorden \"Welcome to Your New Astro Site\", gevolgd door twee rijen kaarten met de labels \"Official Astro Website\", \"Astro Documentation\", \"Download Starter\" en \"Kinsta GitHub\".\" width=\"1600\" height=\"1266\"><figcaption class=\"wp-caption-text\">Onze live Astro homepage<\/figcaption><\/figure>\n<p>Je vindt je live URL en andere details over het deployen op het tabblad <strong>Deployments<\/strong>.<\/p>\n<p>Als alternatief voor Statische Site Hosting kun je ervoor kiezen om je statische site te deployen met Kinsta&#8217;s <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Applicatie Hosting<\/a>, die meer flexibiliteit biedt bij het hosten, een breder scala aan voordelen en toegang tot robuustere features. Bijvoorbeeld schaalbaarheid, aangepaste implementatie met behulp van een Dockerfile en <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">uitgebreide analytics<\/a> met real-time en historische gegevens.<\/p>\n<h2>Samenvatting<\/h2>\n<p>Astro&#8217;s duidelijke structuur, eenvoudige syntaxis en globale componenten maken het bouwen en uitvoeren van een applicatie eenvoudig. de lichtgewicht aard en het dubbele gebruik van statische en dynamische routing verhogen de reactiesnelheid van de site aanzienlijk, terwijl de mogelijkheid om samen te werken met en naast andere JavaScript frameworks het des te aantrekkelijker maakt voor ervaren programmeurs.<\/p>\n<p>Als het je doel is om een site met veel inhoud te maken die snel laadt, modulaire functionaliteit biedt en zowel statisch als dynamisch genereert, dan is Astro misschien wel de juiste keuze voor jou.<\/p>\n<p>Je kunt je statische website gratis hosten met <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Kinsta&#8217;s Statische Site Hosting<\/a>.<\/p>\n<p><em>Wat vind jij van de Astro statische website generator? Heb je het gebruikt voor je eigen project? Laat het ons weten in het comments hieronder.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Webdevelopment heeft een lange weg afgelegd sinds de begindagen van de statische persoonlijke websites met maar \u00e9\u00e9n pagina. Inmiddels hebben we een overvloed aan verschillende talen, &#8230;<\/p>\n","protected":false},"author":283,"featured_media":53419,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[842,847],"class_list":["post-53418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-headless-cms","topic-javascript-frameworks"],"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>Wat is Astro? Een inleiding tot deze populaire statische websitegenerator - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Leer alles over Astro, de populaire statische sitegenerator waarmee je contentrijke websites kan draaien die snel en soepel lopen.\" \/>\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\/nl\/blog\/astro-js\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wat is Astro? Een inleiding tot deze populaire statische websitegenerator\" \/>\n<meta property=\"og:description\" content=\"Leer alles over Astro, de populaire statische sitegenerator waarmee je contentrijke websites kan draaien die snel en soepel lopen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-22T07:38:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-20T09:12:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/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=\"Leer alles over Astro, de populaire statische sitegenerator waarmee je contentrijke websites kan draaien die snel en soepel lopen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/introduction-to-astro.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maciek Palmowski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/\"},\"author\":{\"name\":\"Maciek Palmowski\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\"},\"headline\":\"Wat is Astro? Een inleiding tot deze populaire statische websitegenerator\",\"datePublished\":\"2023-06-22T07:38:31+00:00\",\"dateModified\":\"2023-10-20T09:12:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/\"},\"wordCount\":2401,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/introduction-to-astro.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/\",\"name\":\"Wat is Astro? Een inleiding tot deze populaire statische websitegenerator - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/introduction-to-astro.jpg\",\"datePublished\":\"2023-06-22T07:38:31+00:00\",\"dateModified\":\"2023-10-20T09:12:32+00:00\",\"description\":\"Leer alles over Astro, de populaire statische sitegenerator waarmee je contentrijke websites kan draaien die snel en soepel lopen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/introduction-to-astro.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/introduction-to-astro.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript frameworks\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/javascript-frameworks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wat is Astro? Een inleiding tot deze populaire statische websitegenerator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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\/nl\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\",\"name\":\"Maciek Palmowski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/maciekpalmowski\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wat is Astro? Een inleiding tot deze populaire statische websitegenerator - Kinsta\u00ae","description":"Leer alles over Astro, de populaire statische sitegenerator waarmee je contentrijke websites kan draaien die snel en soepel lopen.","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\/nl\/blog\/astro-js\/","og_locale":"nl_NL","og_type":"article","og_title":"Wat is Astro? Een inleiding tot deze populaire statische websitegenerator","og_description":"Leer alles over Astro, de populaire statische sitegenerator waarmee je contentrijke websites kan draaien die snel en soepel lopen.","og_url":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-06-22T07:38:31+00:00","article_modified_time":"2023-10-20T09:12:32+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/introduction-to-astro.jpg","type":"image\/jpeg"}],"author":"Maciek Palmowski","twitter_card":"summary_large_image","twitter_description":"Leer alles over Astro, de populaire statische sitegenerator waarmee je contentrijke websites kan draaien die snel en soepel lopen.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/introduction-to-astro.jpg","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Maciek Palmowski","Geschatte leestijd":"15 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/"},"author":{"name":"Maciek Palmowski","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072"},"headline":"Wat is Astro? Een inleiding tot deze populaire statische websitegenerator","datePublished":"2023-06-22T07:38:31+00:00","dateModified":"2023-10-20T09:12:32+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/"},"wordCount":2401,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/introduction-to-astro.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/astro-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/","url":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/","name":"Wat is Astro? Een inleiding tot deze populaire statische websitegenerator - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/introduction-to-astro.jpg","datePublished":"2023-06-22T07:38:31+00:00","dateModified":"2023-10-20T09:12:32+00:00","description":"Leer alles over Astro, de populaire statische sitegenerator waarmee je contentrijke websites kan draaien die snel en soepel lopen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/astro-js\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/introduction-to-astro.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/introduction-to-astro.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/astro-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"JavaScript frameworks","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/javascript-frameworks\/"},{"@type":"ListItem","position":3,"name":"Wat is Astro? Een inleiding tot deze populaire statische websitegenerator"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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\/nl\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072","name":"Maciek Palmowski","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/maciekpalmowski\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/53418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/283"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=53418"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/53418\/revisions"}],"predecessor-version":[{"id":56182,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/53418\/revisions\/56182"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53418\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53418\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53418\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53418\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53418\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53418\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53418\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53418\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53418\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/53419"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=53418"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=53418"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=53418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}