{"id":70438,"date":"2023-06-22T08:38:27","date_gmt":"2023-06-22T07:38:27","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=70438&#038;preview=true&#038;preview_id=70438"},"modified":"2024-01-08T08:06:09","modified_gmt":"2024-01-08T07:06:09","slug":"astro-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/astro-js\/","title":{"rendered":"Cos&#8217;\u00e8 Astro? Introduzione al Popolare Generatore di Siti Statici"},"content":{"rendered":"<p>Lo sviluppo web ha fatto molta strada rispetto ai tempi in cui i siti personali erano statici e a pagina singola. Oggi abbiamo una pletora di linguaggi, framework e <a href=\"https:\/\/kinsta.com\/it\/blog\/content-management-system\/\">sistemi di gestione dei contenuti<\/a> creati per soddisfare ogni possibile esigenza.<\/p>\n<p>Tra i framework JavaScript, Astro \u00e8 uno degli ultimi arrivati.<\/p>\n<p>Creato da Fred K. Schott e da un gruppo di collaboratori, Astro \u00e8 diventato rapidamente uno dei framework preferiti dalla comunit\u00e0 di sviluppatori. Si tratta di un framework all-in-one che funziona come generatore di siti statici.<\/p>\n<p>In questo articolo spiegheremo perch\u00e9 molti sviluppatori apprezzano Astro e lo preferiscono ad altre soluzioni. Spiegheremo anche come costruire un blog basato su markdown.<\/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>Cos&#8217;\u00e8 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=\"Il logo Astro in nero, con \"astro\" in lettere minuscole preceduto da una \"A\" maiuscola stilizzata con una piccola fiamma al di sotto.\" width=\"600\" height=\"157\"><figcaption class=\"wp-caption-text\">Astro<\/figcaption><\/figure>\n<p><a href=\"https:\/\/kinsta.com\/it\/blog\/generatore-siti-statici-svelte\/#2-astro\">Astro<\/a>, o Astro.js, \u00e8 un popolare <a href=\"https:\/\/kinsta.com\/it\/blog\/generatori-di-siti-statici\/\">generatore di siti statici<\/a> pensato per chi vuole creare siti ricchi di contenuti veloci e leggeri. La struttura \u00e8 intuitiva e la curva di apprendimento bassa. Ci\u00f2 lo rende interessante per sviluppatori di ogni livello.<\/p>\n<p>Nonostante le dimensioni ridotte, Astro \u00e8 dotato di potenti strumenti che aumentano drasticamente la flessibilit\u00e0 di un sito, facendo risparmiare ore nella gestione dei contenuti e dei temi. Inoltre, in combinazione con Astro, gli sviluppatori hanno la possibilit\u00e0 di lavorare con i propri framework preferiti: una prospettiva interessante per i programmatori esperti.<\/p>\n<p>Ecco alcune caratteristiche che distinguono Astro dalla massa:<\/p>\n<ul>\n<li><strong>Architettura a isola:<\/strong> Astro suddivide l&#8217;interfaccia utente (UI) in elementi pi\u00f9 piccoli e isolati, noti come &#8220;Astro Islands&#8221;, che possono essere utilizzati in qualsiasi pagina. Il codice JavaScript non utilizzato viene sostituito da un HTML leggero.<\/li>\n<li><strong>Zero JavaScript (di default):<\/strong> anche se \u00e8 possibile utilizzare tutto il codice JavaScript che si vuole, Astro cercher\u00e0 di distribuire zero JavaScript in produzione trascrivendo il codice per voi. \u00c8 un approccio perfetto se l&#8217;obiettivo \u00e8 la velocit\u00e0 del sito.<\/li>\n<li><strong>SSG e SSR:<\/strong> Astro \u00e8 nato come generatore di siti statici, ma nel corso del tempo \u00e8 diventato un framework che utilizza sia la generazione di siti statici (SSG) che il <a href=\"https:\/\/kinsta.com\/it\/blog\/architettura-applicazioni-web\/#serversiderendered-architecture\">rendering lato server (SSR)<\/a>. Ed \u00e8 possibile stabilire l&#8217;approccio da seguire per ogni pagina.<\/li>\n<li><strong>Framework-agnostico:<\/strong> con Astro \u00e8 possibile utilizzare qualsiasi <a href=\"https:\/\/kinsta.com\/it\/blog\/librerie-javascript\/\">framework JavaScript<\/a>, anche pi\u00f9 framework contemporaneamente (Ne parleremo in modo pi\u00f9 dettagliato pi\u00f9 avanti in questo articolo).<\/li>\n<\/ul>\n<p>Inoltre, Astro \u00e8 edge-ready, cio\u00e8 pu\u00f2 essere distribuito ovunque e in qualsiasi momento.<\/p>\n<p>Vogliamo indagare pi\u00f9 a fondo? Scopriamo come funziona Astro.<\/p>\n<h2>La struttura di Astro<\/h2>\n<p>Prima di approfondire, \u00e8 importante capire come \u00e8 strutturato Astro per poterlo utilizzare in modo efficace. Diamo un&#8217;occhiata alla struttura dei file core di 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>Come vedete, la struttura in s\u00e9 \u00e8 piuttosto semplice. Ma ci sono alcuni punti chiave da ricordare:<\/p>\n<ul>\n<li>La maggior parte del nostro progetto si trova nella cartella <strong>src<\/strong>. \u00c8 possibile organizzare i componenti, i layout e le pagine in sottocartelle. \u00c8 anche possibile aggiungere altre cartelle per rendere pi\u00f9 semplice la navigazione del progetto.<\/li>\n<li>La cartella <strong>public<\/strong> contiene tutti i file che vivono al di fuori del processo di build, come i font, le immagini o il file <strong>robots.txt<\/strong>.<\/li>\n<li>La cartella <strong>dist<\/strong> conterr\u00e0 tutti i contenuti che si desidera distribuire sul server di produzione.<\/li>\n<\/ul>\n<p>Ora analizziamo gli elementi principali di Astro: i componenti, i layout e le pagine.<\/p>\n<h3>I componenti<\/h3>\n<p>I componenti sono blocchi di codice riutilizzabili che possono essere inseriti in tutto il sito, simili agli <a href=\"https:\/\/kinsta.com\/it\/blog\/shortcode-wordpress\/\">shortcode di WordPress<\/a>. Di default hanno l&#8217;estensione <strong>.astro<\/strong>, ma \u00e8 possibile utilizzare anche componenti non Astro, ad esempio componenti <a href=\"https:\/\/kinsta.com\/it\/blog\/vue-js\/\">Vue<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/generatore-siti-statici-react\/#4-astro\">React<\/a>, Preact o <a href=\"https:\/\/kinsta.com\/it\/blog\/generatore-siti-statici-svelte\/#2-astro\">Svelte<\/a>.<\/p>\n<p>Ecco come si presenta un semplice componente: in questo caso, un tag <code>div<\/code> contenente un <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>Ed ecco come incorporare questo componente nel nostro sito:<\/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>Come mostrato sopra, bisogna prima importare il componente. Solo allora potr\u00e0 essere incluso nella pagina.<\/p>\n<p>Ora \u00e8 il momento di aggiungere alcune propriet\u00e0 al componente. Iniziamo con la propriet\u00e0 <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>Ecco come verr\u00e0 implementata la nostra propriet\u00e0:<\/p>\n<pre><code class=\"language-jsx\">---\nimport KinstaComponent from ..\/components\/Kinsta.astro\n---\n\n&lt;div&gt;\n    &lt;!-- This shows \"Good day\" --&gt;\n    &lt;KinstaComponent title=\"Good day\"\/&gt;\n\n    &lt;!-- This shows \"Hello\" --&gt;\n    &lt;KinstaComponent \/&gt;\n &lt;\/div&gt;<\/code><\/pre>\n<p>Semplice, vero?<\/p>\n<p>Come probabilmente avrete gi\u00e0 capito, la vera forza dei componenti di Astro sta nella loro natura globale e riutilizzabile. Permettono di apportare modifiche radicali all&#8217;intero sito intervenendo solo su poche righe di codice, il che potr\u00e0 farvi risparmiare il tempo richiesto da noiose e minuziose sostituzioni di testo.<\/p>\n<h3>I layout<\/h3>\n<p>Parliamo ora dei layout. Oltre alla loro nota funzione tematica, anche i layout in Astro sono componenti riutilizzabili, ma vengono impiegati come involucri di codice.<\/p>\n<p>Ecco un esempio:<\/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>Si noti l&#8217;elemento <code>&lt;slot \/&gt;<\/code>. In Astro, questo funge da segnaposto per i tag e i contenuti HTML veri e propri.<\/p>\n<p>Vediamolo in azione.<\/p>\n<p>Il codice qui sotto mostra il nostro tag <code>&lt;slot \/&gt;<\/code> che viene sostituito con il codice desiderato, il tutto racchiuso nel nostro layout <strong>Base.astro<\/strong>:<\/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>Il tag <code>&lt;slot \/&gt;<\/code> \u00e8 stato sostituito dall&#8217;HTML che rappresenta, ovvero:<\/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>I layout, come i componenti, permettono di riutilizzare blocchi di codice in tutto il sito. Questo permette di aggiornare il contenuto e il design globale in modo molto pi\u00f9 semplice.<\/p>\n<h3>Pagine<\/h3>\n<p>Le pagine sono un tipo speciale di componente responsabile del routing, del caricamento dei dati e del templating.<\/p>\n<p>Per generare le pagine, Astro utilizza un routing basato su file, invece di un routing dinamico. Il metodo basato sui file non solo consuma meno banda, ma evita anche di dover importare manualmente i componenti.<\/p>\n<p>Ecco un esempio di definizione dei percorsi:<\/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>Con questi percorsi, la nostra homepage verrebbe resa in questo modo:<\/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>Per\u00f2 sappiamo gi\u00e0 come utilizzare i layout, quindi convertiamoli in qualcosa di accessibile a livello globale:<\/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>Ecco, cos\u00ec \u00e8 molto pi\u00f9 pulito.<\/p>\n<p>Parleremo in dettaglio del routing in Astro pi\u00f9 avanti in questo articolo, ma per ora passiamo alle cose pi\u00f9 divertenti: la costruzione e la personalizzazione dei siti.<\/p>\n<h2>Personalizzare ed estendere Astro<\/h2>\n<p>\u00c8 arrivato il momento di personalizzare un sito creato con Astro! Utilizzeremo le collezioni di Markdown, il routing, la gestione delle immagini e l&#8217;integrazione con React per costruire e personalizzare il nostro sito statico.<\/p>\n<h3>Collezioni di Markdown<\/h3>\n<p>Con la versione 2.0, Astro ha <a href=\"https:\/\/astro.build\/blog\/astro-2\/#automatic-type-safety-for-markdown--mdx\" target=\"_blank\" rel=\"noopener noreferrer\">introdotto<\/a> una soluzione migliore per mantenere i contenuti Markdown rispetto al passato. Grazie alle collezioni, possiamo essere sicuri che tutti i dati di frontmatter siano inclusi e abbiano il corretto tipo di associazione.<\/p>\n<p>Di recente, con la versione 2.5, \u00e8 stata <a href=\"https:\/\/astro.build\/blog\/astro-250\/\" target=\"_blank\" rel=\"noopener noreferrer\">aggiunta la possibilit\u00e0 di gestire anche i file JSON e YAML<\/a> come collezioni.<\/p>\n<p>Pronti a sporcarvi le mani?<\/p>\n<p>Per prima cosa, mettete tutti gli articoli Markdown nella cartella <strong>src\/content\/collection_name<\/strong>. Per questo progetto creeremo una collezione blog, quindi nella nostra dimostrazione la cartella sar\u00e0 <strong>src\/content\/blog<\/strong>.<\/p>\n<p>Ora \u00e8 il momento di definire nel nostro file <strong>src\/content\/config.ts<\/strong> tutti i campi frontmatter necessari. Il nostro blog avr\u00e0 bisogno dei seguenti elementi:<\/p>\n<ul>\n<li><code>title<\/code> (string)<\/li>\n<li><code>tags<\/code> (array)<\/li>\n<li><code>publishDate<\/code> (tim)<\/li>\n<li><code>image<\/code> (string, opzionale)<\/li>\n<\/ul>\n<p>Ecco come appare il tutto messo insieme:<\/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>Ecco cosa contiene il nostro file di Markdown <strong>article-about-astro.md<\/strong>:<\/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>\u00c8 vero, non c&#8217;\u00e8 niente di speciale nel nostro file di Markdown. Ma c&#8217;\u00e8 una magia nascosta che si manifesta se facciamo un errore di battitura.<\/p>\n<p>Supponiamo, ad esempio, che invece di digitare <code>publishDate<\/code>, avessimo accidentalmente digitato <code>publishData<\/code>. Nel caso di un errore di battitura come questo, Astro dar\u00e0 un errore:<\/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>Incredibile, vero? Questa funzione ci aiuta a trovare gli errori relativi al frontmatter in pochi secondi.<\/p>\n<p>L&#8217;ultima cosa che dobbiamo aggiungere \u00e8 una pagina che mostri i nostri dati. Creiamo un file in <strong>src\/page\/blog\/[slug].astro<\/strong> con il seguente codice:<\/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>Grazie a <code>getStaticPaths<\/code>, Astro creer\u00e0 tutte le pagine statiche per ogni post della collezione blog.<\/p>\n<p>L&#8217;unica cosa che ci manca ora \u00e8 un elenco di tutti i nostri articoli:<\/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>Tutto questo \u00e8 molto semplice grazie alle collezioni.<\/p>\n<p>Ora creiamo una collezione di tipi di dati. Per prima cosa, dobbiamo aprire nuovamente il file <strong>src\/content\/config.ts<\/strong> e aggiungere una nuova collezione di dati:<\/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\nexport const collections = {\n    'blog': blogCollection,\n'authors': authorsCollection,\n};<\/code><\/pre>\n<p>Oltre a creare una nuova collezione, abbiamo anche aggiunto il riferimento all&#8217;<strong>autore<\/strong> nella <strong>blogCollection<\/strong>.<\/p>\n<p>\u00c8 ora di creare un nuovo autore. Dobbiamo creare un file chiamato <strong>maciek-palmowski.json<\/strong> nella cartella content\/authors.json:<\/p>\n<pre><code class=\"language-jsx\">{\n    \"fullName\": \"Maciek Palmowski\",\n    \"country\": \"Poland\"\n}<\/code><\/pre>\n<p>L&#8217;ultima cosa da fare \u00e8 inserire questi dati nel nostro Post. Per farlo, dovremo utilizzare <a href=\"https:\/\/docs.astro.build\/en\/reference\/api-reference\/#getentry\" target=\"_blank\" rel=\"noopener noreferrer\">getEntry<\/a>:<\/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 ha due diverse modalit\u00e0 di routing. La prima, il routing statico (basato sui file), l&#8217;abbiamo gi\u00e0 conosciuta quando abbiamo parlato delle pagine.<\/p>\n<p>Ora ci concentreremo sul routing dinamico.<\/p>\n<p>Utilizzando i parametri di instradamento dinamico, potete istruire un file di pagina di Astro in modo da automatizzare la creazione di pi\u00f9 pagine con la stessa struttura. Questo \u00e8 utile quando si hanno molte pagine di un tipo particolare (pensate alle biografie degli autori, ai profili degli utenti, agli articoli della documentazione e cos\u00ec via).<\/p>\n<p>Nel prossimo esempio, lavoreremo sulla generazione di pagine bio per i nostri autori.<\/p>\n<p>Nella modalit\u00e0 di output statico predefinita di Astro, queste pagine vengono generate al momento della build, il che significa che dovrete prestabilire l&#8217;elenco degli autori che riceveranno un file corrispondente. In modalit\u00e0 dinamica, invece, le pagine vengono generate su richiesta per ogni percorso.<\/p>\n<p>Se volete passare una variabile come il nome del file, racchiudetela tra parentesi:<\/p>\n<pre><code class=\"language-html\">pages\/blog\/[slug].astro -&gt; blog\/test, blog\/about-me <\/code><\/pre>\n<p>Approfondiamo l&#8217;argomento utilizzando il codice del nostro file <strong>src\/page\/blog\/[slug]<\/strong>:<\/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>La route <code>getStaticPaths<\/code> \u00e8 responsabile della generazione di tutte le pagine statiche. Restituisce due oggetti:<\/p>\n<ul>\n<li><strong><code>params<\/code><\/strong><strong>:<\/strong> utilizzati per riempire le parentesi nei nostri URL<\/li>\n<li><strong><code>props<\/code><\/strong><strong>:<\/strong> tutti i valori che stiamo passando alla pagina<\/li>\n<\/ul>\n<p>E con questo, la generazione della pagina \u00e8 sistemata.<\/p>\n<h3>Gestione delle immagini<\/h3>\n<p>Non possiamo parlare di siti web performanti senza parlare dei <a href=\"https:\/\/kinsta.com\/it\/blog\/formati-file-immagine\/\">moderni formati immagine<\/a>, dei metodi di ridimensionamento e del lazy loading.<\/p>\n<p>Astro ci aiuta anche in questo caso. Grazie al pacchetto <code>@astrojs\/image<\/code>, possiamo introdurre tutto questo in pochi minuti.<\/p>\n<p>Dopo aver <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/image\/\">installato il pacchetto<\/a>, avremo accesso a due componenti: <code>Image<\/code> e <code>Picture<\/code>.<\/p>\n<p>Il componente <code>Image<\/code> viene utilizzato per creare un tag <code>&lt;img \/&gt;<\/code> ottimizzato. Ecco un esempio:<\/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>Allo stesso modo, il componente <code>Picture<\/code> crea un componente <code>&lt;picture\/&gt;<\/code> ottimizzato:<\/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>Di default, Astro \u00e8 un generatore di siti statici. Ci\u00f2 significa che tutti i contenuti vengono convertiti in pagine HTML statiche.<\/p>\n<p>Sebbene questo sia un approccio perfetto da molti punti di vista (soprattutto per quanto riguarda la velocit\u00e0), a volte potremmo preferire un approccio pi\u00f9 dinamico. Ad esempio, se volete una pagina profilo separata per ogni utente o se avete migliaia di articoli sul sito, la restituzione di tutto ogni volta sarebbe troppo dispendiosa in termini di tempo.<\/p>\n<p>Fortunatamente, Astro pu\u00f2 funzionare anche come framework completamente renderizzato sul lato server o in una modalit\u00e0 ibrida tra i due.<\/p>\n<p>Per abilitare l&#8217;SSR a livello di sito, dobbiamo aggiungere il seguente codice al file <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>Questo \u00e8 l&#8217;approccio standard.<\/p>\n<p>Con l&#8217;approccio ibrido, di default, tutto viene generato dinamicamente, tranne le pagine con l&#8217;aggiunta di <code>export const prerender = true<\/code>.<\/p>\n<p>Con Astro 2.5, c&#8217;\u00e8 anche la possibilit\u00e0 di <a href=\"https:\/\/astro.build\/blog\/astro-250\/#static-by-default-hybrid-rendering-experimental\" target=\"_blank\" rel=\"noopener noreferrer\">impostare il rendering statico come predefinito e di selezionare manualmente i percorsi dinamici<\/a>.<\/p>\n<p>Grazie a questi, possiamo, ad esempio, creare un sito web completamente generato staticamente con pagine di login e profilo dinamiche. Bello, vero?<\/p>\n<p>Per saperne di pi\u00f9, consultate la <a href=\"https:\/\/docs.astro.build\/en\/guides\/server-side-rendering\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione ufficiale<\/a>.<\/p>\n<h3>Integrazione di altri framework JavaScript<\/h3>\n<p>Un&#8217;altra caratteristica sorprendente di Astro vi permette di portare con voi il vostro framework preferito e utilizzarlo con Astro. Potete combinare Astro con React, Preact, Svelte, Vue, Solid o Alpine (per tutte le integrazioni, consultate la <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione &#8220;Add Integrations&#8221; di Astro<\/a>).<\/p>\n<p>Supponiamo di voler utilizzare React. Per prima cosa, dobbiamo installare l&#8217;integrazione eseguendo il comando qui sotto in <a href=\"https:\/\/kinsta.com\/it\/blog\/cos-e-npm\/\">npm<\/a>:<\/p>\n<pre><code class=\"language-jsx\">npx astro add react<\/code><\/pre>\n<p>Ora che React \u00e8 stato integrato, possiamo creare un componente React. Nel nostro caso, si tratta del componente contatore 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>Infine, dobbiamo inserire il contatore nella nostra pagina con il seguente codice:<\/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>Et voil\u00e0: il componente React \u00e8 stato integrato perfettamente nel sito.<\/p>\n<h2>Come distribuire Astro su Kinsta<\/h2>\n<p>Ora \u00e8 il momento di portare il nostro sito Astro sul web. Kinsta \u00e8 l&#8217;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">host perfetto per una distribuzione rapida e semplice<\/a>.<\/p>\n<p>Iniziate creando un repo GitHub per i file del vostro sito. Se non siete pronti a utilizzare i vostri file, potete clonare questo <a href=\"https:\/\/github.com\/kinsta\/hello-world-astro\" target=\"_blank\" rel=\"noopener noreferrer\">template di avvio di Astro<\/a> creato dal nostro team.<\/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=\"Una parte del repo GitHub per il sito di avvio Astro di Kinsta, che mostra un'immagine del logo di Astro \"A\" bianco che fluttua su uno sfondo rosa e viola, seguito da \"Kinsta - Hello World - Static Site With Astro\".\" width=\"1400\" height=\"1144\"><figcaption class=\"wp-caption-text\">Repository GitHub del template di avvio di Astro di Kinsta<\/figcaption><\/figure>\n<p>Quando la repo \u00e8 pronta, <a href=\"https:\/\/my.kinsta.com\/?lang=it\">accedete a MyKinsta<\/a>, selezionate <strong>Applicazioni<\/strong> a sinistra e scegliete <strong>Applicazione<\/strong> dal menu a tendina viola <strong>Aggiungi servizio<\/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=\"La dashboard di MyKinsta si \u00e8 aperta alla sezione \"Applicazioni\", che mostra una tendina viola \"Aggiungi servizio\" con due opzioni: \"Applicazione\" e \"Database\".\" width=\"1600\" height=\"770\"><figcaption class=\"wp-caption-text\">Aggiungere un&#8217;applicazione in MyKinsta<\/figcaption><\/figure>\n<p>L&#8217;ultimo passo consiste nel fornire a Kinsta i dettagli della build e della distribuzione.<\/p>\n<p>La maggior parte delle domande che vi verranno poste, come il <strong>nome del processo<\/strong> e il <strong>metodo di pagamento<\/strong>, avranno risposte ovvie o semplici. Se volete, potete lasciare vuoto il campo <strong>Comando di avvio<\/strong>; Kinsta assegner\u00e0 automaticamente il comando a <code>npm start<\/code>.<\/p>\n<p>Se non siete sicuri di come rispondere a qualsiasi altra richiesta, consultate la documentazione di Kinsta per avere <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application\">indicazioni specifiche sul campo<\/a> ed <a href=\"https:\/\/docs.sevalla.com\/templates\/overview\">esempi di implementazione di Astro<\/a>. Potete anche consultare la <a href=\"https:\/\/docs.astro.build\/en\/guides\/deploy\/kinsta\/\" target=\"_blank\" rel=\"noopener noreferrer\">guida di Astro per la distribuzione su Kinsta<\/a>.<\/p>\n<p>Una volta inseriti i dati della build, cliccate sul pulsante <strong>Conferma metodo di pagamento<\/strong> per inizializzare la build.<\/p>\n<p>E il gioco \u00e8 fatto! Ora avete un sito statico <em>up and running<\/em> creato con il framework Astro.<\/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=\"Una pagina scura con il logo Kinsta in bianco al centro sopra la scritta \"Welcome to Your New Astro Site\", seguita da due file di schede con le etichette \"Official Astro Website\", \"Astro Documentation\", \"Download Starter\" e \"Kinsta GitHub\".\" width=\"1600\" height=\"1266\"><figcaption class=\"wp-caption-text\">La nostra homepage Astro dal vivo<\/figcaption><\/figure>\n<p>Potete trovare l&#8217;URL live e gli altri dati dell&#8217;installazione nella sezione <strong>Distribuzioni<\/strong> del vostro account MyKinsta.<\/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=\"La schermata \"Distribuzioni\" di MyKinsta mostra i dettagli e la storia della distribuzione del nostro sito Astro.\" width=\"1600\" height=\"987\"><figcaption class=\"wp-caption-text\">Una distribuzione Astro andata a buon fine<\/figcaption><\/figure>\n<h2>Riepilogo<\/h2>\n<p>Grazie ad una struttura chiara, una sintassi semplice e ai componenti globali, la creazione e l&#8217;esecuzione di un&#8217;applicazione Astro \u00e8 davvero semplice. La leggerezza e il doppio uso del routing statico e dinamico aumentano notevolmente la reattivit\u00e0 del sito, mentre la capacit\u00e0 di interagire con altri framework JavaScript lo rende ancora pi\u00f9 interessante per i coder esperti.<\/p>\n<p>Se il vostro obiettivo \u00e8 quello di creare un sito ricco di contenuti che carichi rapidamente, che garantisca funzionalit\u00e0 modulari e che fornisca una generazione sia statica che dinamica, allora Astro potrebbe essere la scelta giusta.<\/p>\n<p>Potete ospitare gratuitamente il vostro sito web statico sull&#8217;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hosting di Applicazioni di Kinsta<\/a> e, se vi piace, passare al nostro <a href=\"https:\/\/sevalla.com\/pricing\/\">Piano Hobby<\/a>.<\/p>\n<p>Cosa ne pensate del generatore di siti statici Astro? L&#8217;avete gi\u00e0 utilizzato per un progetto? Raccontateci la vostra esperienza nella sezione dei commenti qui sotto.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lo sviluppo web ha fatto molta strada rispetto ai tempi in cui i siti personali erano statici e a pagina singola. Oggi abbiamo una pletora di &#8230;<\/p>\n","protected":false},"author":283,"featured_media":70439,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26179,25918],"class_list":["post-70438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-cms-headless","topic-framework-javascript"],"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>Cos&#039;\u00e8 Astro? Introduzione al Popolare Generatore di Siti Statici - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Scopri tutto su Astro, il popolare generatore di siti statici che consente di creare siti web rapidi, fluidi e ricchi di contenuti.\" \/>\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\/it\/blog\/astro-js\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cos&#039;\u00e8 Astro? Introduzione al Popolare Generatore di Siti Statici\" \/>\n<meta property=\"og:description\" content=\"Scopri tutto su Astro, il popolare generatore di siti statici che consente di creare siti web rapidi, fluidi e ricchi di contenuti.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/astro-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-22T07:38:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-08T07:06:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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=\"Scopri tutto su Astro, il popolare generatore di siti statici che consente di creare siti web rapidi, fluidi e ricchi di contenuti.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/introduction-to-astro.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maciek Palmowski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/astro-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/astro-js\/\"},\"author\":{\"name\":\"Maciek Palmowski\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\"},\"headline\":\"Cos&#8217;\u00e8 Astro? Introduzione al Popolare Generatore di Siti Statici\",\"datePublished\":\"2023-06-22T07:38:27+00:00\",\"dateModified\":\"2024-01-08T07:06:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/astro-js\/\"},\"wordCount\":2293,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/astro-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/introduction-to-astro.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/astro-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/astro-js\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/astro-js\/\",\"name\":\"Cos'\u00e8 Astro? Introduzione al Popolare Generatore di Siti Statici - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/astro-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/astro-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/introduction-to-astro.jpg\",\"datePublished\":\"2023-06-22T07:38:27+00:00\",\"dateModified\":\"2024-01-08T07:06:09+00:00\",\"description\":\"Scopri tutto su Astro, il popolare generatore di siti statici che consente di creare siti web rapidi, fluidi e ricchi di contenuti.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/astro-js\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/astro-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/astro-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/introduction-to-astro.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/introduction-to-astro.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/astro-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Framework JavaScript\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/framework-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Cos&#8217;\u00e8 Astro? Introduzione al Popolare Generatore di Siti Statici\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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\/it\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\",\"name\":\"Maciek Palmowski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/maciekpalmowski\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cos'\u00e8 Astro? Introduzione al Popolare Generatore di Siti Statici - Kinsta\u00ae","description":"Scopri tutto su Astro, il popolare generatore di siti statici che consente di creare siti web rapidi, fluidi e ricchi di contenuti.","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\/it\/blog\/astro-js\/","og_locale":"it_IT","og_type":"article","og_title":"Cos'\u00e8 Astro? Introduzione al Popolare Generatore di Siti Statici","og_description":"Scopri tutto su Astro, il popolare generatore di siti statici che consente di creare siti web rapidi, fluidi e ricchi di contenuti.","og_url":"https:\/\/kinsta.com\/it\/blog\/astro-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-06-22T07:38:27+00:00","article_modified_time":"2024-01-08T07:06:09+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/introduction-to-astro.jpg","type":"image\/jpeg"}],"author":"Maciek Palmowski","twitter_card":"summary_large_image","twitter_description":"Scopri tutto su Astro, il popolare generatore di siti statici che consente di creare siti web rapidi, fluidi e ricchi di contenuti.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/introduction-to-astro.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Maciek Palmowski","Tempo di lettura stimato":"15 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/astro-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/astro-js\/"},"author":{"name":"Maciek Palmowski","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072"},"headline":"Cos&#8217;\u00e8 Astro? Introduzione al Popolare Generatore di Siti Statici","datePublished":"2023-06-22T07:38:27+00:00","dateModified":"2024-01-08T07:06:09+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/astro-js\/"},"wordCount":2293,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/astro-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/introduction-to-astro.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/astro-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/astro-js\/","url":"https:\/\/kinsta.com\/it\/blog\/astro-js\/","name":"Cos'\u00e8 Astro? Introduzione al Popolare Generatore di Siti Statici - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/astro-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/astro-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/introduction-to-astro.jpg","datePublished":"2023-06-22T07:38:27+00:00","dateModified":"2024-01-08T07:06:09+00:00","description":"Scopri tutto su Astro, il popolare generatore di siti statici che consente di creare siti web rapidi, fluidi e ricchi di contenuti.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/astro-js\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/astro-js\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/astro-js\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/introduction-to-astro.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/introduction-to-astro.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/astro-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Framework JavaScript","item":"https:\/\/kinsta.com\/it\/argomenti\/framework-javascript\/"},{"@type":"ListItem","position":3,"name":"Cos&#8217;\u00e8 Astro? Introduzione al Popolare Generatore di Siti Statici"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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\/it\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072","name":"Maciek Palmowski","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/maciekpalmowski\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/70438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/283"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=70438"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/70438\/revisions"}],"predecessor-version":[{"id":75789,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/70438\/revisions\/75789"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70438\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70438\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70438\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70438\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70438\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70438\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70438\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70438\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70438\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/70439"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=70438"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=70438"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=70438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}