{"id":23881,"date":"2025-10-06T16:08:20","date_gmt":"2025-10-06T14:08:20","guid":{"rendered":"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/"},"modified":"2025-10-06T16:08:20","modified_gmt":"2025-10-06T14:08:20","slug":"un-blog-dinamico-con-astro-e-htmx-js","status":"publish","type":"post","link":"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/","title":{"rendered":"Un blog dinamico con Astro e htmx | JS"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<p>Quando gli articoli del blog cominciano ad essere numerosi, generare tutti gli elementi della collezione al momento della generazione della pagina potrebbe non essere la soluzione ottimale in termini di prestazioni.<\/p>\n<p>Per ottimizzare le prestazioni del blog, dobbiamo adottare un approccio dinamico, generando il contenuto solo <a href=\"https:\/\/www.html.it\/pag\/490121\/astro-le-caratteristiche-principali-del-framework\/\" target=\"_blank\" rel=\"noopener\">al momento della richiesta<\/a> dell&#8217;utente. Dobbiamo passare dal rendering statico (SSG) al rendering dinamico (SSR). <\/p>\n<h2 id=\"rendering-on-demand-in-un-blog-dinamico-con-astro-e-htmx\">Rendering on-demand in un blog dinamico con Astro e htmx<\/h2>\n<p>Di default, un sito Astro \u00e8 statico. Ci\u00f2 vuol dire che il rendering avviene al momento della build. Quando il client dell&#8217;utente invia una richiesta al server esso fornir\u00e0 pagine statiche. Questo permette di ottenere siti dalle prestazioni notevoli. Non vi sono infatti database da interrogare o task server side da eseguire.<\/p>\n<p>Tuttavia, quando \u00e8 necessario eseguire operazioni lato server, come ad esempio il recupero di dati da un database, oppure una nuova interrogazione di una collezione di contenuti, \u00e8 necessario passare ad una modalit\u00e0 di rendering Server-Side. Ci\u00f2 in modo che le pagine vengano generate dinamicamente al momento della richiesta dell&#8217;utente.<\/p>\n<p>La modalit\u00e0 SSR (<em>Server-Side Rendering<\/em>) richiede un server <strong>Node.js<\/strong> in esecuzione in produzione per generare le pagine dinamicamente alla richiesta dell&#8217;utente (rendering on-demand). Questo a differenza della modalit\u00e0 SSG (<em>Static Site Generator<\/em>) che produce file statici distribuibili su qualsiasi hosting statico. <\/p>\n<p>\u00c8 necessario anche aggiungere un adattatore che abiliti il rendering on-demand nel nostro progetto Astro. Qui utilizzeremo l&#8217;<a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/node\/\" target=\"_blank\" rel=\"nofollow noopener\">adattatore di Node.js<\/a>, ma Astro supporta anche adattatori, come Cloudflare, Vercel e Netlify. Per maggiori informazioni, si veda la <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/\" target=\"_blank\" rel=\"nofollow noopener\">documentazione online<\/a>.<\/p>\n<p>Interrompiamo l&#8217;esecuzione del server di sviluppo, se \u00e8 in funzione, e digitiamo nel terminale dei comandi quanto segue:<\/p>\n<pre><code class=\"language-bash\">npx astro add node<\/code><\/pre>\n<h2 id=\"il-rendering-on-demand-delle-pagine\">Il rendering on-demand delle pagine<\/h2>\n<p>Questo ci permette di abilitare il rendering on-demand per singola pagina o per l&#8217;intero sito. Al termine dell&#8217;operazione, apriamo il file <code>astro.config.mjs<\/code> e verifichiamo che contenga il seguente codice:<\/p>\n<pre><code class=\"language-javascript\">import { defineConfig } from 'astro\/config';\nimport node from '@astrojs\/node';\nimport tailwindcss from '@tailwindcss\/vite';\nexport default defineConfig({\n\tadapter: node({\n\t\tmode: 'standalone',\n\t}),\n\tvite: {\n\t\tplugins: [tailwindcss()]\n\t}\n});<\/code><\/pre>\n<ul>\n<li><code>import node from '@astrojs\/node'<\/code> importa l&#8217;adattatore di node per il Server-Side Rendering;<\/li>\n<li><code>adapter: node(...)<\/code> fa s\u00ec che il sito non sia statico ma dinamico, generato on-demand. La modalit\u00e0 standalone crea un pacchetto server completo di tutte le dipendenze e autonomo, in modo che possa essere eseguito su qualsiasi macchina su cui sia installato Node.js.<\/li>\n<\/ul>\n<p>Verificato che il file contenga le istruzioni descritte, l&#8217;ultimo step per rendere dinamiche le pagine del progetto \u00e8 aggiungere la seguente istruzione ad ogni singola pagina o endpoint che vogliamo rendere on-demand:<\/p>\n<pre><code class=\"language-javascript\">export const prerender = false;<\/code><\/pre>\n<p>Questa istruzione abilita il rendering dinamico (SSR) per una specifica pagina o endpoint. Le pagine senza questa istruzione rimarranno statiche. Questo permette di adottare un approccio ibrido con siti parzialmente dinamici. Pi\u00f9 avanti vedremo in quali pagine del nostro progetto inserire questo codice.<\/p>\n<h2 id=\"una-pagina-di-archivio-dinamica\">Una pagina di archivio dinamica<\/h2>\n<p>Creiamo una nuova sezione del sito che rispecchi il blog creato nelle lezioni precedenti. Se il primo blog era statico, creato con l&#8217;integrazione di <strong>Alpine.js<\/strong>, questa nuova sezione, che chiameremo <code>Archive<\/code>, \u00e8 generata dinamicamente con l&#8217;integrazione di <strong>htmx<\/strong>.<\/p>\n<p>Creiamo, quindi, la cartella <code>\/src\/pages\/archive<\/code>. All&#8217;interno di questa cartella aggiungiamo poi due file:<\/p>\n<ul>\n<li><code>index.astro<\/code><\/li>\n<li><code>load-more.astro<\/code><\/li>\n<\/ul>\n<p>Il primo file conterr\u00e0 il codice che genera l&#8217;<a href=\"https:\/\/www.html.it\/guide\/guida-html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> da fornire all&#8217;utente quando accede alla pagina di archivio.<\/p>\n<p>Apriamo il file <code>index.astro<\/code> e aggiungiamo il seguente frontmatter:<\/p>\n<pre><code class=\"language-javascript\">---\nimport { getCollection, type CollectionEntry } from 'astro:content';\nimport Layout from '..\/..\/layouts\/Layout.astro';\nimport ArticleCard from '..\/..\/components\/ArticleCard.astro';\nconst POSTS_PER_PAGE = 3;\nconst sortedPosts = (await getCollection('blog')).sort(\n\t(a: CollectionEntry&lt;'blog'&gt;, b: CollectionEntry&lt;'blog'&gt;) =&gt;\n\t\tb.data.pubDate.getTime() - a.data.pubDate.getTime()\n);\nconst initialPosts: CollectionEntry&lt;'blog'&gt;[] = sortedPosts.slice(0, POSTS_PER_PAGE);\nconst hasMore: boolean = sortedPosts.length &gt; POSTS_PER_PAGE;\n---<\/code><\/pre>\n<ul>\n<li>Le prime tre istruzioni importano le dipendenze necessarie;<\/li>\n<li><code>POSTS_PER_PAGE<\/code> stabilisce il numero di articoli da visualizzare per pagina;<\/li>\n<li><code>sortedPosts<\/code> \u00e8 un array di oggetti <code>CollectionEntry&lt;'blog'&gt;<\/code> ordinati per data di pubblicazione;<\/li>\n<li><code>initialPosts<\/code> \u00e8 un array degli articoli iniziali da mostrare nella pagina di archivio, dall&#8217;indice 0 a <code>POSTS_PER_PAGE<\/code>;<\/li>\n<li><code>hasMore<\/code> \u00e8 un booleano impostato a <code>true<\/code> se <code>sortedPosts.length &gt; POSTS_PER_PAGE<\/code>, ossia se il numero totale di post \u00e8 maggiore del numero di post per pagina.<\/li>\n<\/ul>\n<p>Nel successivo markup, utilizziamo i dati generati nel frontmatter per generare la struttura HTML della pagina. Come gi\u00e0 detto, si tratta dei primi contenuti visibili al momento del caricamento.<\/p>\n<pre><code class=\"language-markup\">&lt;Layout title=\"Archivio Articoli\" description=\"Caricamento progressivo con HTMX.\"&gt;\n\t&lt;h1 class=\"text-4xl font-extrabold text-gray-900 mb-8\"&gt;Archivio&lt;\/h1&gt;\n\t&lt;div id=\"posts-container\" class=\"grid gap-10\"&gt;\n\t\t{initialPosts.map(post =&gt; (\n\t\t\t&lt;ArticleCard post={post} \/&gt;\n\t\t))}\n\t\t&lt;div id=\"load-more-row\" class=\"mt-12 text-center\"&gt;\n\t\t\t&lt;!-- Mostra il pulsante solo se ci sono altri post --&gt;\n\t\t\t{hasMore &amp;&amp; (\n\t\t\t&lt;button\n\t\t\t\ttype=\"button\"\n\t\t\t\thx-get=\"\/archive\/load-more\"\n\t\t\t\thx-vals='{\"page\": 2}'\n\t\t\t\thx-target=\"#load-more-row\"\n\t\t\t\thx-swap=\"outerHTML\"\n\t\t\t\tclass=\"bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700\"\n\t\t\t&gt;\n\t\t\t\tCarica Altri Articoli\n\t\t\t&lt;\/button&gt;\n\t\t\t)}\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n&lt;\/Layout&gt;<\/code><\/pre>\n<h2 id=\"analisi-del-codice\">Analisi del codice<\/h2>\n<p>Vediamo gli elementi principali di questo blocco di codice:<\/p>\n<ul>\n<li>Tutto il contenuto della pagina \u00e8 racchiuso nel componente <code>Layout<\/code>. Quindi, l&#8217;header, il footer e i meta tag saranno gli stessi del blog. Gli attributi <code>title<\/code> e <code>description<\/code> sono le propriet\u00e0 che vengono passate verso l&#8217;alto al componente.<\/li>\n<li>La <code>div#post-container<\/code> \u00e8 il contenitore di tutti gli articoli. <\/li>\n<li><code>initialPosts.map<\/code> itera tra gli elementi dell&#8217;array <code>initialPosts<\/code> che in questo esempio contiene tre articoli.<\/li>\n<li><code>&lt;ArticleCard post={post} \/&gt;<\/code> renderizza il componente <code>ArticleCard<\/code>, passando ad ogni istanza la propriet\u00e0 <code>post<\/code>.<\/li>\n<li>La successiva <code>div#load-more-row<\/code> \u00e8 il contenitore del pulsante &#8220;Carica Altri Articoli&#8221;.<\/li>\n<li>Se <code>hasMore<\/code> \u00e8 <code>true<\/code>, viene generato il pulsante &#8220;Carica Altri Articoli&#8221; con gli attributi htmx:<\/li>\n<li><code>hx-get<\/code> invia una richiesta GET all&#8217;URL specificato.<\/li>\n<li><code>hx-vals<\/code> aggiunge i parametri da trasmettere con l&#8217;URL. <code>{\"page\": 2}<\/code> specifica la pagina iniziale da caricare. Avremmo potuto fare la stessa cosa aggiungendo una variabile alla querystring (<code>\/archive\/load-more?page=2<\/code>).<\/li>\n<li><code>hx-target<\/code> specifica l&#8217;elemento del DOM che ricever\u00e0 il codice della risposta. Nel nostro esempio \u00e8 lo stesso contenitore del pulsante.<\/li>\n<li><code>hx-swap<\/code> stabilisce come aggiornare l&#8217;elemento target. In questo caso, <code>outerHTML<\/code> fa s\u00ec che venga sostituito l&#8217;intero elemento target, incluso l&#8217;elemento stesso.<\/li>\n<\/ul>\n<p>Ora possiamo aggiungere un nuovo link al menu di navigazione nel layout generale del sito. Apriamo il file <code>\/src\/layouts\/Layout.astro<\/code> e modifichiamo il menu come segue:<\/p>\n<pre><code class=\"language-markup\">&lt;nav class=\"max-w-4xl mx-auto px-6 py-4 flex justify-between items-center\"&gt;\n\t&lt;a href=\"https:\/\/www.html.it\/\" class=\"text-xl font-bold text-purple-700\"&gt;{title}&lt;\/a&gt;\n\t&lt;div class=\"flex items-center gap-x-6\"&gt;\n\t\t&lt;a href=\"https:\/\/www.html.it\/\" class=\"text-gray-600 hover:text-purple-700 mr-4\"&gt;Home&lt;\/a&gt;\n\t\t&lt;a href=\"http:\/\/www.html.it\/blog\" class=\"text-gray-600 hover:text-purple-700\"&gt;Blog&lt;\/a&gt;\n\t\t&lt;a href=\"http:\/\/www.html.it\/archive\" class=\"text-gray-600 hover:text-purple-700\"&gt;Archive&lt;\/a&gt;\n\t&lt;\/div&gt;\n&lt;\/nav&gt;<\/code><\/pre>\n<div id=\"attachment_562533\" style=\"width: 2384px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-562533\" src=\"https:\/\/www.html.it\/app\/uploads\/2025\/09\/archivio-articoli-scaled.jpg\" alt=\"Archivio di articoli pronto per il rendering on-demand\" width=\"2374\" height=\"2560\" class=\"size-full wp-image-562533\" srcset=\"https:\/\/cdn.html.it\/1YxlpdRJfs7nGzbQudNbur7Vgk4=\/2374x\/smart\/filters:format(webp)\/https:\/\/www.html.it\/app\/uploads\/2025\/09\/archivio-articoli-scaled.jpg 2374w, https:\/\/cdn.html.it\/CPmI1J5NOpsZ4rHUbszzZxwHisk=\/278x\/smart\/filters:format(webp)\/https:\/\/www.html.it\/app\/uploads\/2025\/09\/archivio-articoli.jpg 278w, https:\/\/cdn.html.it\/zyFOcfYmRBS3YXvDGIruJtcFbP8=\/600x\/smart\/filters:format(webp)\/https:\/\/www.html.it\/app\/uploads\/2025\/09\/archivio-articoli.jpg 600w, https:\/\/cdn.html.it\/YSFr-AkyEUBq3lwuRmJFb_Rb7Zw=\/1425x\/smart\/filters:format(webp)\/https:\/\/www.html.it\/app\/uploads\/2025\/09\/archivio-articoli.jpg 1425w, https:\/\/cdn.html.it\/GkXEf1P-eDs6OCkYx5S-UU80zSE=\/1899x\/smart\/filters:format(webp)\/https:\/\/www.html.it\/app\/uploads\/2025\/09\/archivio-articoli.jpg 1899w\" sizes=\"(max-width: 2374px) 100vw, 2374px\"\/><\/p>\n<p id=\"caption-attachment-562533\" class=\"wp-caption-text\">Archivio di articoli pronto per il rendering on-demand<\/p>\n<\/div>\n<p>Dopo questo approfondimento dedicato alla creazione di un blog dinamico con Astro e htmx, nella prossima lezione, creeremo l&#8217;endpoint <code>\/archive\/load-more.astro<\/code> per gestire il caricamento dinamico dei post successivi, integrando htmx con Astro SSR per generare una paginazione dinamica e scalabile.<\/p>\n<div id=\"tagmailerContainer\">\n<p>Se vuoi aggiornamenti su <em>Un blog dinamico con Astro e htmx<\/em> inserisci la tua email nel box qui sotto:<\/p>\n<\/div>\n<p><span class=\"bm_post\" style=\"display:none\" data-domain=\"html.it\" data-author=\"unknown\" data-alias=\"unknown\" data-tipologia=\"edit\" data-custom=\"\" data-po=\"\" data-path=\"https:\/\/www.html.it\/pag\/562532\/un-blog-dinamico-con-astro-e-htmx\/\" data-postid=\"562532\" data-programs=\"\" data-subjects=\"\" data-themes=\"\"\/><\/p><\/div>\n<p><br \/>\n<br \/><a href=\"https:\/\/www.html.it\/pag\/562532\/un-blog-dinamico-con-astro-e-htmx\/\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando gli articoli del blog cominciano ad essere numerosi, generare tutti gli elementi della collezione al momento della generazione della pagina potrebbe non essere la soluzione ottimale in termini di prestazioni. Per ottimizzare le prestazioni del blog, dobbiamo adottare un approccio dinamico, generando il contenuto solo al momento della richiesta dell&#8217;utente. Dobbiamo passare dal rendering&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_s2mail":""},"categories":[37],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Un blog dinamico con Astro e htmx | JS - AGENZIA WEB Italia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Un blog dinamico con Astro e htmx | JS - AGENZIA WEB Italia\" \/>\n<meta property=\"og:description\" content=\"Quando gli articoli del blog cominciano ad essere numerosi, generare tutti gli elementi della collezione al momento della generazione della pagina potrebbe non essere la soluzione ottimale in termini di prestazioni. Per ottimizzare le prestazioni del blog, dobbiamo adottare un approccio dinamico, generando il contenuto solo al momento della richiesta dell&#8217;utente. Dobbiamo passare dal rendering...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/\" \/>\n<meta property=\"og:site_name\" content=\"AGENZIA WEB Italia\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-06T14:08:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.html.it\/app\/uploads\/2025\/09\/archivio-articoli-scaled.jpg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\"},\"headline\":\"Un blog dinamico con Astro e htmx | JS\",\"datePublished\":\"2025-10-06T14:08:20+00:00\",\"dateModified\":\"2025-10-06T14:08:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/\"},\"wordCount\":854,\"publisher\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\"},\"articleSection\":[\"News\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/\",\"name\":\"Un blog dinamico con Astro e htmx | JS - AGENZIA WEB Italia\",\"isPartOf\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#website\"},\"datePublished\":\"2025-10-06T14:08:20+00:00\",\"dateModified\":\"2025-10-06T14:08:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Un blog dinamico con Astro e htmx | JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#website\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\",\"name\":\"AGENZIA WEB Italia\",\"description\":\"Web design Web agency Italia\",\"publisher\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\",\"name\":\"Multimedia Web\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png\",\"contentUrl\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png\",\"width\":200,\"height\":57,\"caption\":\"Multimedia Web\"},\"image\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Un blog dinamico con Astro e htmx | JS - AGENZIA WEB Italia","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:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/","og_locale":"it_IT","og_type":"article","og_title":"Un blog dinamico con Astro e htmx | JS - AGENZIA WEB Italia","og_description":"Quando gli articoli del blog cominciano ad essere numerosi, generare tutti gli elementi della collezione al momento della generazione della pagina potrebbe non essere la soluzione ottimale in termini di prestazioni. Per ottimizzare le prestazioni del blog, dobbiamo adottare un approccio dinamico, generando il contenuto solo al momento della richiesta dell&#8217;utente. Dobbiamo passare dal rendering...","og_url":"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/","og_site_name":"AGENZIA WEB Italia","article_published_time":"2025-10-06T14:08:20+00:00","og_image":[{"url":"https:\/\/www.html.it\/app\/uploads\/2025\/09\/archivio-articoli-scaled.jpg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"admin","Tempo di lettura stimato":"6 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/#article","isPartOf":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/"},"author":{"name":"admin","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42"},"headline":"Un blog dinamico con Astro e htmx | JS","datePublished":"2025-10-06T14:08:20+00:00","dateModified":"2025-10-06T14:08:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/"},"wordCount":854,"publisher":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization"},"articleSection":["News"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/","name":"Un blog dinamico con Astro e htmx | JS - AGENZIA WEB Italia","isPartOf":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#website"},"datePublished":"2025-10-06T14:08:20+00:00","dateModified":"2025-10-06T14:08:20+00:00","breadcrumb":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/un-blog-dinamico-con-astro-e-htmx-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.nycwebdesign.eu\/webdesign\/"},{"@type":"ListItem","position":2,"name":"Un blog dinamico con Astro e htmx | JS"}]},{"@type":"WebSite","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#website","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/","name":"AGENZIA WEB Italia","description":"Web design Web agency Italia","publisher":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.nycwebdesign.eu\/webdesign\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization","name":"Multimedia Web","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png","contentUrl":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png","width":200,"height":57,"caption":"Multimedia Web"},"image":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42","name":"admin","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g","caption":"admin"}}]}},"_links":{"self":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts\/23881"}],"collection":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/comments?post=23881"}],"version-history":[{"count":0,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts\/23881\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/media?parent=23881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/categories?post=23881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/tags?post=23881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}