{"id":35590,"date":"2026-04-08T13:54:35","date_gmt":"2026-04-08T11:54:35","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=35590"},"modified":"2026-04-09T01:49:34","modified_gmt":"2026-04-08T23:49:34","slug":"astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/","title":{"rendered":"Astro vs Next.js: due filosofie per costruire il web moderno"},"content":{"rendered":"\n<p>Sono anni interessanti per noi frontend\u2026 Abbiamo visto arrivare <a href=\"https:\/\/angular.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular<\/a>, <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">React<\/a>, <a href=\"https:\/\/vuejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vue<\/a>, <a href=\"https:\/\/svelte.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">Svelte<\/a>, <a href=\"https:\/\/www.solidjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Solid<\/a>, meta-framework come <a href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Next.js<\/a>, <a href=\"https:\/\/nuxt.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Nuxt<\/a> e <a href=\"https:\/\/remix.run\/\">Remix<\/a>, e poi \u00e8 arrivato <a href=\"https:\/\/astro.build\/\" target=\"_blank\" rel=\"noreferrer noopener\">Astro<\/a>, con un approccio &#8220;zero JavaScript&#8221; che rompe le regole del gioco: oggi approfondiremo un po&#8217; di pi\u00f9 questo framework, <a href=\"https:\/\/blog.cloudflare.com\/astro-joins-cloudflare\/\">che \u00e8 stato recentemente da Cloudflare<\/a>.<\/p>\n\n\n\n<p>In questo ecosistema ricco e frammentato spesso facciamo sempre le stesse cose\u2026 Usiamo sempre lo stesso strumento, un po&#8217; perch\u00e9 lo conosciamo bene, un po&#8217; perch\u00e9 funziona, un po&#8217; per pigrizia\u2026 Next.js funziona? S\u00ec, quasi sempre. Ma &#8220;funziona&#8221; non significa che sia sempre la scelta giusta.<\/p>\n\n\n\n<p>In questo articolo paragoneremo Astro e Next.js, ma non vogliamo decretare un vincitore. Vogliamo rispondere a una domanda pi\u00f9 utile: <strong>quando ha senso usare Astro, e quando ha pi\u00f9 senso usare Next.js?<\/strong> Per rispondere bene, dobbiamo capire da dove vengono i due framework, cosa li muove sotto il cofano, e quali problemi ciascuno \u00e8 davvero progettato per risolvere.<\/p>\n\n\n\n<p>Sei pronto? Andiamo!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-un-po-di-contesto-il-problema-del-javascript-nel-browser\">Un po&#8217; di contesto: il problema del JavaScript nel browser<\/h2>\n\n\n\n<p>Prima di entrare nei dettagli tecnici, vale la pena fare un passo indietro.<\/p>\n\n\n\n<p>Il web di oggi ha un problema di peso. Negli ultimi dieci anni, la quantit\u00e0 media di JavaScript scaricata da un browser per visitare una pagina web \u00e8 cresciuta in modo esponenziale. Nel 2023, la mediana di script per pagina desktop superava i 500KB compressi, che diventano diversi megabyte una volta analizzati ed eseguiti dal motore del browser. Ci sono casi estremi: <a href=\"https:\/\/thatshubham.com\/blog\/news-audit\" target=\"_blank\" rel=\"noreferrer noopener\">pagine web che pesano da sole quasi 50MB<\/a><\/p>\n\n\n\n<p>Questo ha conseguenze reali: tempi di caricamento pi\u00f9 lunghi, esperienze peggiori su dispositivi di fascia media o bassa, Core Web Vitals compromessi, e ranking SEO penalizzati.<\/p>\n\n\n\n<p>Il problema non deriva dall&#8217;uso di React o di altri framework. Il problema \u00e8 il modello di sviluppo che si \u00e8 affermato: costruiamo app React complete anche quando stiamo costruendo siti che sono, fondamentalmente, contenuto. Un blog, una pagina marketing, una documentazione tecnica\u2026 Tutte queste pagine non hanno bisogno di un runtime JavaScript che gira nel browser per mostrare testo e immagini. Eppure \u00e8 esattamente quello che succede quando usi un framework pensato per applicazioni interattive per costruire qualcosa che \u00e8, nella sostanza, statico.<\/p>\n\n\n\n<p>\u00c8 un po&#8217; come usare un camion per fare la spesa: funziona, ci arrivi al supermercato, ma stai portando con te un sacco di peso inutile, spendi un sacco di soldi di gasolio e oggi come oggi sappiamo quanto costa.<\/p>\n\n\n\n<p>Astro e Next.js partono da risposte diverse a questo problema. Next.js dice: &#8220;ti do tutti gli strumenti per costruire qualsiasi cosa, e poi ottimizziamo insieme&#8221;. Astro dice: &#8220;partiamo da zero JavaScript e aggiungiamo solo quello che serve davvero&#8221;. Due filosofie opposte, entrambe legittime, ma con conseguenze molto diverse sul risultato finale.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-next-js-il-fullstack-framework-di-riferimento-per-react\">Next.js: il fullstack framework di riferimento per React<\/h2>\n\n\n\n<p>Next.js \u00e8 sviluppato e mantenuto da <a href=\"https:\/\/vercel.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vercel<\/a>. Negli anni \u00e8 cresciuto fino a diventare molto pi\u00f9 di un semplice layer sopra React: \u00e8 diventato davvero una piattaforma fullstack che copre rendering, routing, gestione dei dati e deployment in modo integrato.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-rendering-modes\">Rendering modes<\/h3>\n\n\n\n<p>Una delle forze storiche di Next.js \u00e8 la flessibilit\u00e0 nei modi di rendering:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Static Site Generation (SSG)<\/strong>: le pagine vengono pre-renderizzate in fase di build e servite come asset statici<\/li>\n\n\n\n<li><strong>Server Side Rendering (SSR)<\/strong>: le pagine vengono renderizzate a ogni richiesta (utile per contenuti personalizzati o dati in tempo reale)<\/li>\n\n\n\n<li><strong>Incremental Static Regeneration (ISR)<\/strong>: un ibrido\u2026 Le pagine statiche vengono rigenerate in background con una frequenza configurabile<\/li>\n<\/ul>\n\n\n\n<p>Vediamo un esempio di pagina rigenerata ogni ora.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ SSG con revalidation ogni ora<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> revalidate = <span class=\"hljs-number\">3600<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">BlogPage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> posts = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">\"https:\/\/api.example.com\/posts\"<\/span>).then(<span class=\"hljs-function\"><span class=\"hljs-params\">res<\/span> =&gt;<\/span>\n    res.json()\n  )\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Blog<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      {posts.map(post =&gt; (\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">article<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{post.id}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>{post.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{post.excerpt}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">article<\/span>&gt;<\/span>\n      ))}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span><\/span>\n  )\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-react-server-components\">React Server Components<\/h3>\n\n\n\n<p>Con l&#8217;introduzione dell&#8217;App Router (Next.js 13+), il framework ha abbracciato i <strong>React Server Components (RSC)<\/strong>, uno dei cambiamenti pi\u00f9 significativi nell&#8217;ecosistema React degli ultimi anni. I Server Components girano esclusivamente sul server. Non vengono mai idratati nel browser. Possono accedere direttamente a database, filesystem o API interne senza esporre nulla al client.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Questo componente non invia JavaScript al browser<\/span>\n<span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">UserProfile<\/span>(<span class=\"hljs-params\">{ userId }: { userId: string }<\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ Accesso diretto al database: impossibile con i Client Components<\/span>\n  <span class=\"hljs-keyword\">const<\/span> user = <span class=\"hljs-keyword\">await<\/span> db.users.findUnique({ <span class=\"hljs-attr\">where<\/span>: { <span class=\"hljs-attr\">id<\/span>: userId } })\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>{user.name}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{user.bio}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  )\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>I Client Components, invece, vengono dichiarati esplicitamente con la direttiva <code>\"use client\"<\/code> e gestiscono tutto ci\u00f2 che richiede interattivit\u00e0 lato browser.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-string\">\"use client\"<\/span>\n\n<span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">LikeButton<\/span>(<span class=\"hljs-params\">{ initialCount }: { initialCount: number }<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;count, setCount] = useState(initialCount)\n  <span class=\"hljs-keyword\">const<\/span> &#91;liked, setLiked] = useState(<span class=\"hljs-literal\">false<\/span>)\n\n  <span class=\"hljs-keyword\">const<\/span> handleLike = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    setCount(<span class=\"hljs-function\"><span class=\"hljs-params\">prev<\/span> =&gt;<\/span> liked ? prev - <span class=\"hljs-number\">1<\/span> : prev + <span class=\"hljs-number\">1<\/span>)\n    setLiked(<span class=\"hljs-function\"><span class=\"hljs-params\">prev<\/span> =&gt;<\/span> !prev)\n  }\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{handleLike}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{liked<\/span> ? \"<span class=\"hljs-attr\">liked<\/span>\" <span class=\"hljs-attr\">:<\/span> \"\"}&gt;<\/span>\n      \u2665 {count}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/span>\n  )\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Questa distinzione \u00e8 potente, ma introduce anche complessit\u00e0: capire dove tracciare il confine tra Server e Client Components richiede esperienza e attenzione.<\/p>\n\n\n\n<p>La regola pratica \u00e8 semplice: un componente deve diventare Client Component solo se usa <code>useState<\/code>, <code>useEffect<\/code>, event handler del browser, o librerie che dipendono da API disponibili solo lato client (come <code>window<\/code> o <code>localStorage<\/code>). Tutto il resto (layout, sezioni statiche, componenti che si limitano a ricevere props e renderizzare HTML) pu\u00f2 e dovrebbe restare Server Component.<\/p>\n\n\n\n<p>Un errore comune nei principianti \u00e8 mettere <code>\"use client\"<\/code> ovunque, spesso per abitudine o perch\u00e9 &#8220;cos\u00ec funziona&#8221;. Il risultato \u00e8 che l&#8217;intero albero di componenti viene spedito e idratato nel browser, annullando di fatto tutti i vantaggi del modello RSC. \u00c8 come costruire una casa con porte blindate su ogni stanza invece che solo sull&#8217;ingresso.<\/p>\n\n\n\n<p>Un secondo errore, meno ovvio, \u00e8 il cosiddetto &#8220;client boundary creep&#8221;: basta un <code>\"use client\"<\/code> su un componente padre per rendere automaticamente Client Components tutti i suoi figli, anche quelli che non ne avrebbero bisogno.<\/p>\n\n\n\n<p>La soluzione \u00e8 progettare la gerarchia di componenti in modo che le parti interattive siano foglie dell&#8217;albero, non radici, e passare i Server Components come <code>children<\/code> ai Client Components quando possibile.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-api-routes-e-server-actions\">API Routes e Server Actions<\/h3>\n\n\n\n<p>Next.js permette di definire endpoint backend direttamente nel progetto, nella stessa codebase del frontend:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ app\/api\/subscribe\/route.ts<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">POST<\/span>(<span class=\"hljs-params\">request: Request<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> { email } = <span class=\"hljs-keyword\">await<\/span> request.json()\n\n  <span class=\"hljs-keyword\">await<\/span> db.subscribers.create({ <span class=\"hljs-attr\">data<\/span>: { email } })\n\n  <span class=\"hljs-keyword\">return<\/span> Response.json({ <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-literal\">true<\/span> })\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Con l&#8217;introduzione delle <strong>Server Actions<\/strong>, \u00e8 possibile invocare logica server-side direttamente dai componenti React, senza dover definire endpoint separati:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">subscribeAction<\/span>(<span class=\"hljs-params\">formData: FormData<\/span>) <\/span>{\n  <span class=\"hljs-string\">\"use server\"<\/span>\n  <span class=\"hljs-keyword\">const<\/span> email = formData.get(<span class=\"hljs-string\">\"email\"<\/span>) <span class=\"hljs-keyword\">as<\/span> string\n  <span class=\"hljs-keyword\">await<\/span> db.subscribers.create({ <span class=\"hljs-attr\">data<\/span>: { email } })\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">NewsletterForm<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">action<\/span>=<span class=\"hljs-string\">{subscribeAction}<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"email\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"email\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"La tua email\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>&gt;<\/span>Iscriviti<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/span>\n  )\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Questo livello di integrazione tra frontend e backend \u00e8 uno dei punti di forza pi\u00f9 evidenti di Next.js per chi costruisce prodotti complessi. Un&#8217;unica codebase, un unico deploy, nessun context switch.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-setup-del-progetto\">Setup del progetto<\/h3>\n\n\n\n<p>Creare un progetto Next.js \u00e8 questione di un comando:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">create-next-app<\/span><span class=\"hljs-keyword\">@latest<\/span> my-app<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>La CLI ti chiede se vuoi TypeScript, ESLint e la struttura con <code>src\/<\/code> directory\u2026 Tutte opzioni che puoi accettare o rifiutare. In pochi secondi hai un progetto funzionante con App Router, dev server con hot reload e tutto il necessario per iniziare a costruire.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-astro-meno-javascript-piu-performance\">Astro: meno JavaScript, pi\u00f9 performance<\/h2>\n\n\n\n<p>Astro nasce nel 2021 con un&#8217;idea precisa e radicale:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>La maggior parte del web non ha bisogno di tutto quel JavaScript.<\/p>\n<\/blockquote>\n\n\n\n<p>Il suo principio fondante \u00e8 <strong>zero JavaScript by default<\/strong>: se non lo richiedi esplicitamente, Astro non invia nulla di JavaScript al browser. Le pagine vengono compilate in HTML statico durante la build.<\/p>\n\n\n\n<p>Vediamo un esempio concreto:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">---\n<span class=\"hljs-comment\">\/\/ Questo codice gira solo a build time (o sul server)<\/span>\n<span class=\"hljs-keyword\">const<\/span> title = <span class=\"hljs-string\">\"Benvenuto su Astro\"<\/span>\n<span class=\"hljs-keyword\">const<\/span> posts = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">\"https:\/\/api.example.com\/posts\"<\/span>).then(<span class=\"hljs-function\"><span class=\"hljs-params\">r<\/span> =&gt;<\/span> r.json())\n---\n\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>{title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>{title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n      {posts.map(post =&gt; (\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{<\/span>`\/<span class=\"hljs-attr\">blog<\/span>\/${<span class=\"hljs-attr\">post.slug<\/span>}`}&gt;<\/span>{post.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n      ))}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Il risultato \u00e8 HTML puro. Nessun runtime JavaScript. Nessuna idratazione. Il browser riceve esattamente quello che deve mostrare, senza dover eseguire codice aggiuntivo.<\/p>\n\n\n\n<p>Questo si traduce in metriche eccellenti: Time to First Byte (TTFB) basso, Largest Contentful Paint (LCP) rapidissimo, e un Total Blocking Time (TBT) praticamente nullo per le pagine statiche.<\/p>\n\n\n\n<p>Il risultato finale \u00e8 HTML puro, niente JavaScript, tienilo a mente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-islands-architecture\">Islands Architecture<\/h3>\n\n\n\n<p>La vera innovazione di Astro non \u00e8 il rendering statico in s\u00e9, altri framework lo fanno da anni. Il vero &#8220;segreto&#8221; \u00e8 il modello con cui gestisce le parti interattive: le <strong>Islands<\/strong>.<\/p>\n\n\n\n<p>L&#8217;idea \u00e8 semplice, ma allo stesso tempo rivoluzionaria: invece di rendere l&#8217;intera pagina un&#8217;applicazione React che poi viene idratata nel browser, Astro tratta la pagina come HTML statico con delle &#8220;isole&#8221; di interattivit\u00e0 isolate. Ogni isola viene idratata in modo indipendente, solo quando necessario.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">---\n<span class=\"hljs-keyword\">import<\/span> Header <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Header.astro\"<\/span>             <span class=\"hljs-comment\">\/\/ Statico<\/span>\n<span class=\"hljs-keyword\">import<\/span> HeroVideo <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/HeroVideo.jsx\"<\/span>         <span class=\"hljs-comment\">\/\/ Interattivo<\/span>\n<span class=\"hljs-keyword\">import<\/span> FeatureList <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/FeatureList.astro\"<\/span>   <span class=\"hljs-comment\">\/\/ Statico<\/span>\n<span class=\"hljs-keyword\">import<\/span> PricingToggle <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/PricingToggle.jsx\"<\/span> <span class=\"hljs-comment\">\/\/ Interattivo<\/span>\n<span class=\"hljs-keyword\">import<\/span> Footer <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Footer.astro\"<\/span>             <span class=\"hljs-comment\">\/\/ Statico<\/span>\n---\n\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Header<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">HeroVideo<\/span> <span class=\"hljs-attr\">client:visible<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">FeatureList<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">PricingToggle<\/span> <span class=\"hljs-attr\">client:visible<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Footer<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Solo <code>HeroVideo<\/code> e <code>PricingToggle<\/code> inviano JavaScript al browser, e solo quando entrano nella viewport. <code>Header<\/code>, <code>FeatureList<\/code> e <code>Footer<\/code> sono HTML puro, zero JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-le-direttive-client\">Le direttive client<\/h3>\n\n\n\n<p>Astro offre un set di direttive per controllare con precisione quando e come un componente viene idratato:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Direttiva<\/th><th>Quando avviene l&#8217;idratazione<\/th><\/tr><\/thead><tbody><tr><td><code>client:load<\/code><\/td><td>Immediatamente al caricamento della pagina<\/td><\/tr><tr><td><code>client:visible<\/code><\/td><td>Quando il componente entra nella viewport (usa l&#8217;Intersection Observer)<\/td><\/tr><tr><td><code>client:idle<\/code><\/td><td>Quando il browser \u00e8 inattivo (requestIdleCallback)<\/td><\/tr><tr><td><code>client:media<\/code><\/td><td>Quando una media query diventa vera<\/td><\/tr><tr><td><code>client:only<\/code><\/td><td>Solo client-side, senza SSR del componente<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>L&#8217;<strong>Intersection Observer<\/strong> \u00e8 una API nativa del browser che notifica il tuo codice nel momento in cui un elemento entra o esce dalla viewport, senza dover ascoltare l&#8217;evento <code>scroll<\/code> e calcolare posizioni manualmente.<\/p>\n\n\n\n<p>\u00c8 efficiente perch\u00e9 il browser gestisce il tracciamento in modo asincrono, senza bloccare il thread principale. Astro lo usa internamente per <code>client:visible<\/code>: il componente viene idratato solo quando l&#8217;utente sta effettivamente per vederlo, non prima.<\/p>\n\n\n\n<p>Questo livello di controllo granulare \u00e8 qualcosa che Next.js non offre nativamente. In Next.js puoi ottimizzare con i Server Components, ma l&#8217;idratazione dei Client Components \u00e8 automatica e immediata non appena vengono inclusi nella pagina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-framework-agnostic\">Framework agnostic<\/h3>\n\n\n\n<p>Un altro punto di forza di Astro spesso sottovalutato: non sei vincolato a React. Puoi usare componenti Vue, Svelte, Solid, <a href=\"https:\/\/lit.dev\/\">Lit<\/a>, o anche mescolare framework diversi nella stessa pagina.<\/p>\n\n\n\n<p>Immagina di lavorare con un collega che conosce solo Svelte mentre tu hai sempre fatto React: con Astro potete lavorare sullo stesso progetto senza che nessuno dei due debba imparare qualcosa di nuovo. Non \u00e8 uno scenario comune, ma quando capita, \u00e8 una salvezza.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">---\n<span class=\"hljs-keyword\">import<\/span> ReactCounter <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Counter.jsx\"<\/span>   <span class=\"hljs-comment\">\/\/ React<\/span>\n<span class=\"hljs-keyword\">import<\/span> VueCarousel <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Carousel.vue\"<\/span>   <span class=\"hljs-comment\">\/\/ Vue<\/span>\n<span class=\"hljs-keyword\">import<\/span> SvelteModal <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/Modal.svelte\"<\/span>   <span class=\"hljs-comment\">\/\/ Svelte<\/span>\n---\n\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ReactCounter<\/span> <span class=\"hljs-attr\">client:load<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">VueCarousel<\/span> <span class=\"hljs-attr\">client:visible<\/span> \/&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SvelteModal<\/span> <span class=\"hljs-attr\">client:load<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Per un team che migra gradualmente da un framework a un altro, o che ha competenze miste, questa flessibilit\u00e0 \u00e8 preziosa. E per chi vuole sperimentare con Svelte o Solid senza riscrivere tutto, \u00e8 un&#8217;opzione interessante.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-setup-del-progetto-0\">Setup del progetto<\/h3>\n\n\n\n<p>Creare un progetto Astro \u00e8 davvero semplice: basta un comando nel terminale per avere tutto pronto.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">create<\/span> <span class=\"hljs-selector-tag\">astro<\/span><span class=\"hljs-keyword\">@latest<\/span> my-project<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>La CLI interattiva ti guida nella scelta del template e delle opzioni base. Una volta creato il progetto, se hai bisogno di componenti interattivi, come nell&#8217;esempio che vedremo il pricing toggle e il form, aggiungi l&#8217;integrazione con il framework che preferisci. Per React, ad esempio:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npx astro add react<\/code><\/span><\/pre>\n\n\n<p>Astro installa automaticamente le dipendenze necessarie (<code>react<\/code>, <code>react-dom<\/code>, <code>@astrojs\/react<\/code>) e aggiorna la configurazione in <code>astro.config.mjs<\/code>. Non devi toccare nulla a mano. Lo stesso vale per Vue (<code>astro add vue<\/code>), Svelte (<code>astro add svelte<\/code>) o qualsiasi altra <a href=\"https:\/\/astro.build\/integrations\/\">integrazione supportata ufficialmente<\/a>.<\/p>\n\n\n\n<p>Questo approccio modulare \u00e8 una delle caratteristiche distintive di Astro: parti leggero e aggiungi solo quello che ti serve, quando ti serve. Non porti con te il peso di un runtime che non usi.<\/p>\n\n\n\n<p>La struttura del progetto \u00e8 semplice e prevedibile: le pagine vivono in <code>src\/pages\/<\/code>, i componenti in <code>src\/components\/<\/code>, e ogni file <code>.astro<\/code> ha un frontmatter delimitato da <code>---<\/code> dove puoi scrivere logica server-side in JavaScript o TypeScript. Se hai mai lavorato con file Markdown con frontmatter YAML, il concetto ti sar\u00e0 familiare, solo che qui il frontmatter \u00e8 codice eseguibile.<\/p>\n\n\n\n<p>Il routing funziona esattamente come in Next.js: \u00e8 <strong>file-based<\/strong>. Un file <code>src\/pages\/about.astro<\/code> diventa <code>\/about<\/code>, un file <code>src\/pages\/blog\/[slug].astro<\/code> diventa una rotta dinamica <code>\/blog\/qualsiasi-slug<\/code>.<\/p>\n\n\n\n<p>Se hai gi\u00e0 usato il Pages Router di Next.js, ti sentirai subito a casa. La differenza \u00e8 che Next.js ha poi introdotto l&#8217;App Router, con le cartelle <code>app\/<\/code> e i file speciali <code>page.tsx<\/code>, <code>layout.tsx<\/code>, <code>loading.tsx<\/code>, aggiungendo potenza ma anche complessit\u00e0.<\/p>\n\n\n\n<p>Astro resta sul modello pi\u00f9 semplice: un file, una rotta, nessuna convenzione da imparare.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-confronto-diretto-una-pagina-marketing\">Confronto diretto: una pagina marketing<\/h2>\n\n\n\n<p>Mettiamo tutto insieme con un esempio concreto. Dobbiamo costruire una landing page con:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hero con video di background<\/li>\n\n\n\n<li>Sezione feature in testo<\/li>\n\n\n\n<li>Toggle per la visualizzazione dei prezzi mensili\/annuali<\/li>\n\n\n\n<li>Testimonianze caricate da una API esterna<\/li>\n\n\n\n<li>Form di iscrizione alla newsletter<\/li>\n<\/ul>\n\n\n\n<p>Le testimonianze sono un caso interessante: vengono da un CMS esterno, cambiano raramente, e non hanno bisogno di interattivit\u00e0. \u00c8 esattamente il tipo di dato che i due framework gestiscono in modo molto diverso.<\/p>\n\n\n\n<p>Una nota pratica: negli esempi di codice che seguono, l&#8217;articolo mostra una <code>fetch<\/code> verso un&#8217;API esterna (<code>https:\/\/api.example.com\/testimonials<\/code>). Nel codice reale allegato all&#8217;articolo non c&#8217;\u00e8 nessuna API. Le testimonianze vengono da un semplice file JSON locale (<code>src\/data\/testimonials.json<\/code>) importato direttamente nel componente.<\/p>\n\n\n\n<p>Il concetto \u00e8 lo stesso: i dati arrivano al browser gi\u00e0 renderizzati come HTML, senza JavaScript.<\/p>\n\n\n\n<p>Abbiamo anche semplificato l&#8217;hero, sostituendo il video di background con un gradiente CSS, per mantenere gli esempi leggeri e facili da eseguire senza dipendenze esterne.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-fetch-dei-dati-astro\">Fetch dei dati: Astro<\/h3>\n\n\n\n<p>In Astro, il fetch avviene nel frontmatter, la sezione delimitata dai <code>---<\/code> che abbiamo visto nel setup. Quel codice gira <strong>solo sul server<\/strong> (o a build time), mai nel browser.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">---\n<span class=\"hljs-comment\">\/\/ src\/pages\/index.astro<\/span>\n<span class=\"hljs-keyword\">import<\/span> PricingToggle <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/PricingToggle.jsx\"<\/span>\n<span class=\"hljs-keyword\">import<\/span> NewsletterForm <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/NewsletterForm.jsx\"<\/span>\n\n<span class=\"hljs-comment\">\/\/ Questo fetch avviene a build time (o a ogni richiesta con SSR abilitato)<\/span>\n<span class=\"hljs-comment\">\/\/ Il browser non vede nulla di questo codice<\/span>\n<span class=\"hljs-keyword\">const<\/span> res = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">\"https:\/\/api.example.com\/testimonials\"<\/span>)\n<span class=\"hljs-keyword\">const<\/span> testimonials = <span class=\"hljs-keyword\">await<\/span> res.json()\n---\n\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"hero\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Il nostro prodotto<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>La soluzione pi\u00f9 veloce per il tuo team.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"pricing\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Prezzi chiari, senza sorprese<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n      <span class=\"hljs-comment\">&lt;!-- Caricato solo quando entra nel viewport --&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">PricingToggle<\/span> <span class=\"hljs-attr\">client:visible<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n    <span class=\"hljs-comment\">&lt;!-- Le testimonianze sono HTML puro: zero JavaScript --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"testimonials\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Cosa dicono di noi<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n      {testimonials.map(t =&gt; (\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">blockquote<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{t.quote}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cite<\/span>&gt;<\/span>- {t.author}, {t.company}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cite<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">blockquote<\/span>&gt;<\/span>\n      ))}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"newsletter\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Resta aggiornato<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n      <span class=\"hljs-comment\">&lt;!-- Idratato subito --&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">NewsletterForm<\/span> <span class=\"hljs-attr\">client:load<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Il risultato nel browser \u00e8 HTML puro. Le testimonianze sono gi\u00e0 l\u00ec, nel markup, senza una singola riga di JavaScript eseguita per mostrarle. <code>PricingToggle<\/code> e <code>NewsletterForm<\/code> sono le uniche due isole interattive, e ognuna viene idratata nei propri tempi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-fetch-dei-dati-next-js\">Fetch dei dati: Next.js<\/h3>\n\n\n\n<p>In Next.js con l&#8217;App Router, il fetch avviene direttamente nei Server Components: funzioni <code>async<\/code> che girano sul server e passano i dati ai componenti figli.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ app\/page.tsx<\/span>\n<span class=\"hljs-keyword\">import<\/span> PricingToggle <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@\/components\/pricing-toggle\"<\/span>   <span class=\"hljs-comment\">\/\/ internamente \"use client\"<\/span>\n<span class=\"hljs-keyword\">import<\/span> NewsletterForm <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@\/components\/newsletter-form\"<\/span> <span class=\"hljs-comment\">\/\/ internamente \"use client\"<\/span>\n\n<span class=\"hljs-comment\">\/\/ Questo \u00e8 un Server Component: gira solo sul server<\/span>\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">LandingPage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ Il fetch avviene sul server - nessun problema di CORS, nessuna chiave API esposta<\/span>\n  <span class=\"hljs-keyword\">const<\/span> res = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">\"https:\/\/api.example.com\/testimonials\"<\/span>, {\n    <span class=\"hljs-attr\">next<\/span>: { <span class=\"hljs-attr\">revalidate<\/span>: <span class=\"hljs-number\">3600<\/span> } <span class=\"hljs-comment\">\/\/ ISR: rigenera i dati ogni ora<\/span>\n  })\n  <span class=\"hljs-keyword\">const<\/span> testimonials = <span class=\"hljs-keyword\">await<\/span> res.json()\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"hero\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Il nostro prodotto<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>La soluzione pi\u00f9 veloce per il tuo team.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"pricing\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Prezzi chiari, senza sorprese<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        {\/* PricingToggle \u00e8 un Client Component: viene idratato automaticamente *\/}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">PricingToggle<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n      {\/* Le testimonianze vengono da un Server Component: HTML puro, niente JS *\/}\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"testimonials\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Cosa dicono di noi<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        {testimonials.map((t: Testimonial) =&gt; (\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">blockquote<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{t.id}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{t.quote}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cite<\/span>&gt;<\/span>- {t.author}, {t.company}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cite<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">blockquote<\/span>&gt;<\/span>\n        ))}\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"newsletter\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Resta aggiornato<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        {\/* NewsletterForm \u00e8 un Client Component *\/}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">NewsletterForm<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span><\/span>\n  )\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Nota l&#8217;opzione <code>{ next: { revalidate: 3600 } }<\/code>: \u00e8 un&#8217;estensione di Next.js all&#8217;API <code>fetch<\/code> nativa che attiva l&#8217;<strong>Incremental Static Regeneration<\/strong>. I dati vengono cachati e rigenerati in background ogni ora, senza dover fare un nuovo fetch a ogni richiesta.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-il-punto-di-differenza\">Il punto di differenza<\/h3>\n\n\n\n<p>Guardando i due esempi fianco a fianco, la logica di fetch \u00e8 sorprendentemente simile: in entrambi i casi il codice gira sul server, i dati arrivano al browser come HTML, e nessuna chiave API viene esposta al client.<\/p>\n\n\n\n<p>La differenza \u00e8 nel <strong>controllo dell&#8217;idratazione<\/strong>.<\/p>\n\n\n\n<p>In Astro, <code>PricingToggle<\/code> viene idratato quando entra nella viewport. <code>NewsletterForm<\/code> \u00e8 subito. Il resto \u00e8 inerte.<\/p>\n\n\n\n<p>In Next.js, <code>PricingToggle<\/code> e <code>NewsletterForm<\/code> vengono idratati non appena React \u00e8 pronto nel browser, anche se l&#8217;utente non ha ancora scrollato fino al pricing. Non \u00e8 necessariamente un problema, ma \u00e8 un comportamento che Astro ti permette di controllare con precisione chirurgica.<\/p>\n\n\n\n<p>Per questa pagina specifica la differenza di performance \u00e8 probabilmente trascurabile. Su una pagina con dieci componenti interattivi, inizia a diventare rilevante. Su un sito con centinaia di pagine come questa, \u00e8 la differenza tra un Lighthouse score di 95 e uno di 75.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-developer-experience-a-confronto\">Developer Experience a confronto<\/h2>\n\n\n\n<p>La performance non \u00e8 l&#8217;unico asse di confronto. Vale la pena considerare anche l&#8217;esperienza di sviluppo quotidiana, perch\u00e9 il framework con cui lavori ogni giorno incide direttamente sulla tua produttivit\u00e0 e sulla qualit\u00e0 del risultato finale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-next-js\">Next.js<\/h3>\n\n\n\n<p>Se conosci React, con Next.js sei gi\u00e0 a met\u00e0 strada. L&#8217;ecosistema \u00e8 maturo, la documentazione \u00e8 eccellente e la community \u00e8 enorme\u2026 Significa che per quasi ogni problema che incontri, qualcuno ha gi\u00e0 trovato una soluzione, senza dimenticare il supporto dell&#8217;AI.<\/p>\n\n\n\n<p>Il modello mentale dei Server Components richiede un po&#8217; di adattamento iniziale: devi abituarti a ragionare su quali componenti girano sul server e quali nel browser. Ma una volta acquisito, \u00e8 un modello potente che ti permette di scrivere meno codice client-side senza sacrificare l&#8217;interattivit\u00e0.<\/p>\n\n\n\n<p>Il dev server con hot reload \u00e8 veloce e affidabile. <a href=\"https:\/\/www.typescriptlang.org\/\">TypeScript<\/a> \u00e8 first-class citizen: i tipi vengono generati automaticamente per le route e i parametri. L&#8217;integrazione nativa con Vercel rende il deploy un non-problema\u2026<\/p>\n\n\n\n<p>Un <code>git push<\/code> e il sito \u00e8 online. Ma puoi fare deploy anche su altre piattaforme: Docker, Node.js standalone, o qualsiasi provider che supporti le serverless functions.<\/p>\n\n\n\n<p>L&#8217;ecosistema di librerie compatibili \u00e8 praticamente illimitato. Autenticazione, ORM, state management, UI kit. Se esiste per React, funziona con Next.js. Questo \u00e8 un vantaggio concreto quando lavori in team o su progetti di lunga durata: non devi reinventare la ruota.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-astro\">Astro<\/h3>\n\n\n\n<p>Astro ha una curva di apprendimento sorprendentemente bassa, soprattutto se vieni dal mondo HTML\/CSS. La sintassi dei file <code>.astro<\/code> \u00e8 familiare: un frontmatter JavaScript in cima e template HTML con espressioni sotto. Non c&#8217;\u00e8 un paradigma nuovo da imparare. \u00c8 il web che conosci gi\u00e0, con un po&#8217; di superpotere in pi\u00f9.<\/p>\n\n\n\n<p>La documentazione \u00e8 eccellente e ben organizzata, con guide pratiche che ti portano da zero a un sito funzionante in pochi minuti. Il dev server \u00e8 rapido e la build \u00e8 tipicamente molto veloce, anche su progetti con centinaia di pagine.<\/p>\n\n\n\n<p>Il punto di attenzione sono le Islands: devi pensare in anticipo a quali parti della pagina sono statiche e quali interattive. Questo richiede un cambio di mentalit\u00e0 rispetto allo sviluppo React tradizionale, dove tutto \u00e8 un componente e tutto \u00e8 potenzialmente interattivo. Ma \u00e8 un vincolo che tende a produrre architetture pi\u00f9 pulite e risultati pi\u00f9 performanti: ti costringe a farti la domanda giusta: &#8220;questo componente ha davvero bisogno di JavaScript nel browser?&#8221;<\/p>\n\n\n\n<p>Un aspetto spesso sottovalutato: Astro si integra facilmente con CMS headless come <a href=\"https:\/\/www.contentful.com\/\">Contentful<\/a>, <a href=\"https:\/\/www.sanity.io\/\">Sanity<\/a>, <a href=\"https:\/\/www.storyblok.com\/\">Storyblok<\/a> o anche file Markdown locali.<\/p>\n\n\n\n<p>Per siti editoriali gestiti da team non tecnici, questa \u00e8 spesso la killer feature: il content team lavora nel CMS, lo sviluppatore definisce i template, e Astro genera pagine statiche velocissime senza che nessuno debba toccare codice.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-debugging-e-tooling\">Debugging e tooling<\/h3>\n\n\n\n<p>Su entrambi i framework, il debugging \u00e8 un&#8217;esperienza solida. Next.js si integra nativamente con i React DevTools e offre messaggi di errore dettagliati con overlay nel browser. Astro mostra errori chiari nel terminale e nel browser, con stack trace che puntano direttamente al file <code>.astro<\/code> sorgente, non al codice compilato.<\/p>\n\n\n\n<p>Entrambi i framework includono una <strong>dev toolbar<\/strong> integrata nel browser durante lo sviluppo: una barra in basso alla pagina che mostra informazioni utili, permette di ispezionare le isole (Astro) o i Server\/Client Components (Next.js), e d\u00e0 accesso a impostazioni rapide senza dover aprire il terminale. In Astro la toolbar mostra visivamente i confini di ogni isola: utile per capire a colpo d&#8217;occhio cosa \u00e8 statico e cosa \u00e8 interattivo.<\/p>\n\n\n\n<p>Un punto a favore di Astro: quando qualcosa non funziona, il modello mentale \u00e8 pi\u00f9 semplice da debuggare. Se un componente non si idrata, sai esattamente dove guardare: la direttiva <code>client:*<\/code> nel template. In Next.js, capire perch\u00e9 un componente sta girando sul server o sul client pu\u00f2 richiedere qualche passaggio in pi\u00f9, soprattutto nei casi limite tra Server e Client Components.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-quando-scegliere-astro\">Quando scegliere Astro<\/h2>\n\n\n\n<p>Astro \u00e8 la scelta giusta quando la <strong>performance e il contenuto sono la priorit\u00e0 assoluta<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Blog e magazine digitali<\/strong>: il contenuto cambia raramente, l&#8217;interattivit\u00e0 \u00e8 minima<\/li>\n\n\n\n<li><strong>Documentazione tecnica<\/strong>: velocit\u00e0 di navigazione e SEO sono critici<\/li>\n\n\n\n<li><strong>Siti marketing e landing page<\/strong>: ogni millisecondo di LCP conta per le conversioni<\/li>\n\n\n\n<li><strong>Portfolio e siti personali<\/strong>: semplicit\u00e0 e leggerezza prima di tutto<\/li>\n\n\n\n<li><strong>Siti editoriali con CMS<\/strong>: dove il contenuto \u00e8 il prodotto<\/li>\n<\/ul>\n\n\n\n<p>Se il tuo sito \u00e8 principalmente contenuto con qualche spruzzata di interattivit\u00e0, Astro ti dar\u00e0 una velocit\u00e0 difficile da battere con qualsiasi altra soluzione, con meno configurazione e meno codice.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-quando-scegliere-next-js\">Quando scegliere Next.js<\/h2>\n\n\n\n<p>Next.js \u00e8 la scelta giusta quando stai costruendo una <strong>vera applicazione web<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>SaaS e prodotti con autenticazione<\/strong>: gestione di sessioni, ruoli, dati utente<\/li>\n\n\n\n<li><strong>Dashboard e interfacce complesse<\/strong>: molto stato, navigazione dinamica, aggiornamenti in tempo reale<\/li>\n\n\n\n<li><strong>E-commerce con logica dinamica<\/strong>: carrello, checkout, personalizzazione, inventory in tempo reale<\/li>\n\n\n\n<li><strong>Applicazioni con API backend integrate<\/strong>: quando vuoi un&#8217;unica codebase per frontend e backend<\/li>\n\n\n\n<li><strong>Prodotti che crescono nel tempo<\/strong>: ecosistema maturo, TypeScript eccellente, adatto a team grandi<\/li>\n<\/ul>\n\n\n\n<p>Se il tuo prodotto vive di stato, autenticazione, logica di business e interazione continua con il server, Next.js ti offre tutto ci\u00f2 di cui hai bisogno senza dover assemblare pezzi di librerie diverse.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-una-nota-sul-futuro\">Una nota sul futuro<\/h2>\n\n\n\n<p>Il confine tra i due framework si sta assottigliando. Astro ha introdotto il supporto per le <strong>server routes<\/strong> e le <strong>actions<\/strong>, avvicinandosi al mondo delle applicazioni fullstack. Next.js con i Server Components si \u00e8 avvicinato al modello &#8220;meno JavaScript nel browser&#8221; che Astro ha sempre promosso.<\/p>\n\n\n\n<p>Non \u00e8 detto che tra qualche anno le differenze siano ancora cos\u00ec nette. Ma oggi rimangono due strumenti con identit\u00e0 distinte e casi d&#8217;uso ben definiti. La convergenza \u00e8 un segnale positivo: il settore sta riconoscendo che spedire meno JavaScript al browser \u00e8 quasi sempre una buona idea, e che il rendering server-side non \u00e8 una feature opzionale ma un punto di partenza.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusione\">Conclusione<\/h2>\n\n\n\n<p>Astro e Next.js non sono in competizione: risolvono problemi diversi, con filosofie diverse.<\/p>\n\n\n\n<p><strong>Astro<\/strong> parte dal contenuto e aggiunge interattivit\u00e0 solo dove serve. Il risultato sono pagine veloci, leggere, ottimizzate per il web che la maggior parte degli utenti visita ogni giorno.<\/p>\n\n\n\n<p><strong>Next.js<\/strong> parte dall&#8217;applicazione e ottimizza il rendering dove pu\u00f2. Il risultato \u00e8 una piattaforma completa per costruire prodotti digitali complessi, scalabili e manutenibili nel tempo.<\/p>\n\n\n\n<p>La domanda giusta non \u00e8 <em>&#8220;quale framework \u00e8 migliore?&#8221;<\/em>. \u00c8 <em>&#8220;cosa sto costruendo, e per chi?&#8221;<\/em><\/p>\n\n\n\n<p>Se \u00e8 un sito dove il contenuto \u00e8 il valore: Astro.<br>Se \u00e8 un&#8217;applicazione dove l&#8217;interazione \u00e8 il valore: Next.js.<\/p>\n\n\n\n<p>E se non sei sicuro? Inizia dall&#8217;utente. Dove vive la sua esperienza? Nella lettura o nell&#8217;interazione? La risposta \u00e8 l\u00ec, non nel framework.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sono anni interessanti per noi frontend\u2026 Abbiamo visto arrivare Angular, React, Vue, Svelte, Solid, meta-framework come Next.js, Nuxt e Remix, e poi \u00e8 arrivato Astro, con un approccio &#8220;zero JavaScript&#8221; che rompe le regole del gioco: oggi approfondiremo un po&#8217; di pi\u00f9 questo framework, che \u00e8 stato recentemente da Cloudflare. In questo ecosistema ricco e&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/\">Read more<\/a><\/p>\n","protected":false},"author":349,"featured_media":35643,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10230],"tags":[10329,11664],"collections":[11549],"class_list":{"0":"post-35590","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-linguaggi-programmazione","8":"tag-framework","9":"tag-next","10":"collections-il-meglio-della-settimana","11":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Astro vs Next.js: due filosofie per costruire il web moderno - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Astro e Next.js non sono in competizione: risolvono problemi diversi, con filosofie diverse. La domanda giusta non \u00e8 &quot;quale framework \u00e8 migliore?&quot;. \u00c8 &quot;cosa sto costruendo, e per chi?&quot;\" \/>\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.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Astro vs Next.js: due filosofie per costruire il web moderno\" \/>\n<meta property=\"og:description\" content=\"Astro e Next.js non sono in competizione: risolvono problemi diversi, con filosofie diverse. La domanda giusta non \u00e8 &quot;quale framework \u00e8 migliore?&quot;. \u00c8 &quot;cosa sto costruendo, e per chi?&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-08T11:54:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-08T23:49:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1152\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Francesco Napoletano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Francesco Napoletano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/\"},\"author\":{\"name\":\"Francesco Napoletano\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f27416284aa6defd4fb248cf2766dfaf\"},\"headline\":\"Astro vs Next.js: due filosofie per costruire il web moderno\",\"datePublished\":\"2026-04-08T11:54:35+00:00\",\"dateModified\":\"2026-04-08T23:49:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/\"},\"wordCount\":3161,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg\",\"keywords\":[\"Framework\",\"Next\"],\"articleSection\":[\"Linguaggi di programmazione\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/\",\"name\":\"Astro vs Next.js: due filosofie per costruire il web moderno - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg\",\"datePublished\":\"2026-04-08T11:54:35+00:00\",\"dateModified\":\"2026-04-08T23:49:34+00:00\",\"description\":\"Astro e Next.js non sono in competizione: risolvono problemi diversi, con filosofie diverse. La domanda giusta non \u00e8 \\\"quale framework \u00e8 migliore?\\\". \u00c8 \\\"cosa sto costruendo, e per chi?\\\"\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg\",\"width\":1152,\"height\":768,\"caption\":\"astro vs next\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Linguaggi di programmazione\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Astro vs Next.js: due filosofie per costruire il web moderno\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f27416284aa6defd4fb248cf2766dfaf\",\"name\":\"Francesco Napoletano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/be00812d69638a442c22193c6743ed3189a542aa1086fd87b3de0dd855de400a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/be00812d69638a442c22193c6743ed3189a542aa1086fd87b3de0dd855de400a?s=96&d=mm&r=g\",\"caption\":\"Francesco Napoletano\"},\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/francesco-napoletano\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Astro vs Next.js: due filosofie per costruire il web moderno - Codemotion Magazine","description":"Astro e Next.js non sono in competizione: risolvono problemi diversi, con filosofie diverse. La domanda giusta non \u00e8 \"quale framework \u00e8 migliore?\". \u00c8 \"cosa sto costruendo, e per chi?\"","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.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/","og_locale":"en_US","og_type":"article","og_title":"Astro vs Next.js: due filosofie per costruire il web moderno","og_description":"Astro e Next.js non sono in competizione: risolvono problemi diversi, con filosofie diverse. La domanda giusta non \u00e8 \"quale framework \u00e8 migliore?\". \u00c8 \"cosa sto costruendo, e per chi?\"","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2026-04-08T11:54:35+00:00","article_modified_time":"2026-04-08T23:49:34+00:00","og_image":[{"width":1152,"height":768,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg","type":"image\/jpeg"}],"author":"Francesco Napoletano","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Francesco Napoletano","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/"},"author":{"name":"Francesco Napoletano","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f27416284aa6defd4fb248cf2766dfaf"},"headline":"Astro vs Next.js: due filosofie per costruire il web moderno","datePublished":"2026-04-08T11:54:35+00:00","dateModified":"2026-04-08T23:49:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/"},"wordCount":3161,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg","keywords":["Framework","Next"],"articleSection":["Linguaggi di programmazione"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/","name":"Astro vs Next.js: due filosofie per costruire il web moderno - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg","datePublished":"2026-04-08T11:54:35+00:00","dateModified":"2026-04-08T23:49:34+00:00","description":"Astro e Next.js non sono in competizione: risolvono problemi diversi, con filosofie diverse. La domanda giusta non \u00e8 \"quale framework \u00e8 migliore?\". \u00c8 \"cosa sto costruendo, e per chi?\"","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg","width":1152,"height":768,"caption":"astro vs next"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/astro-vs-next-js-due-filosofie-per-costruire-il-web-moderno\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Linguaggi di programmazione","item":"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/"},{"@type":"ListItem","position":3,"name":"Astro vs Next.js: due filosofie per costruire il web moderno"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f27416284aa6defd4fb248cf2766dfaf","name":"Francesco Napoletano","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/be00812d69638a442c22193c6743ed3189a542aa1086fd87b3de0dd855de400a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/be00812d69638a442c22193c6743ed3189a542aa1086fd87b3de0dd855de400a?s=96&d=mm&r=g","caption":"Francesco Napoletano"},"url":"https:\/\/www.codemotion.com\/magazine\/author\/francesco-napoletano\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next-600x600.jpg","author_info":{"display_name":"Francesco Napoletano","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/francesco-napoletano\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg",1152,768,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next-300x200.jpg",300,200,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next-768x512.jpg",768,512,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next-1024x683.jpg",1024,683,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg",1152,768,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next.jpg",1152,768,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next-100x100.jpg",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2026\/03\/astro-vs-next-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Francesco Napoletano","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/francesco-napoletano\/"},"uagb_comment_info":0,"uagb_excerpt":"Sono anni interessanti per noi frontend\u2026 Abbiamo visto arrivare Angular, React, Vue, Svelte, Solid, meta-framework come Next.js, Nuxt e Remix, e poi \u00e8 arrivato Astro, con un approccio &#8220;zero JavaScript&#8221; che rompe le regole del gioco: oggi approfondiremo un po&#8217; di pi\u00f9 questo framework, che \u00e8 stato recentemente da Cloudflare. In questo ecosistema ricco e&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/35590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/349"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=35590"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/35590\/revisions"}],"predecessor-version":[{"id":35647,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/35590\/revisions\/35647"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/35643"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=35590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=35590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=35590"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=35590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}