--- title: "Architettura 101: framework, monorepo e come si incastrano le applicazioni moderne" description: "Costruire una mappa mentale chiara di frontend, backend e database, capire lo split marketing contro app e sapere quando un monorepo vale la pena" type: "lesson" locale: "it" course: "Lo stack applicativo moderno - Auth, dati e pagamenti" number: "3.1" canonical: "https://agenticschool.dev/it/corsi/modern-app-stack/architecture-101-frameworks-monorepos-and-how-modern-apps-fit-together" datePublished: "2026-06-12" dateModified: "2026-06-12" --- # Architettura 101: framework, monorepo e come si incastrano le applicazioni moderne - Course: Lo stack applicativo moderno - Auth, dati e pagamenti - Lesson: 3.1 - Duration: 24 min - Level: fortgeschritten - Status: published - Canonical URL: https://agenticschool.dev/it/corsi/modern-app-stack/architecture-101-frameworks-monorepos-and-how-modern-apps-fit-together - Locale: it > Costruire una mappa mentale chiara di frontend, backend e database, capire lo split marketing contro app e sapere quando un monorepo vale la pena ## Summary Prima di collegare auth, dati e pagamenti, ti serve una mappa mentale di come si incastra un'applicazione moderna. Questa lezione spiega i framework come Next.js, Astro, TanStack Start e Vue, la ripartizione tra frontend, backend e database, perche team come Clerk e Convex separano il loro sito marketing veloce dall'app stessa, e quando un monorepo aiuta invece di intralciare. ## What you learn - Cosa vogliono dire frontend, backend e database e come si passano il lavoro - In cosa Next.js, Astro, TanStack Start e Vue differiscono e quando afferrare ciascuno - Lo split sito marketing contro app e quando un monorepo vale la sua complessita ## Panoramica Hai finito il Corso 1 pubblicando un vero sito e il Corso 2 trasformando il tuo agente in uno strumento potente. Ora sali da una semplice pagina statica a una vera applicazione con utenti, dati e pagamenti. Prima di tutto cio, ti serve la mappa. Questa lezione e quella mappa: cosa fa davvero per te un framework, i tre strati di cui ogni app e costruita, perche i team seri separano un sito marketing veloce dall'app piu pesante e quando un monorepo e un regalo contro una tassa. Rendi cio chiaro, e ogni decisione successiva di questo corso smette di sembrare arbitraria. ## Cosa imparerai Imparerai la differenza tra frontend, backend e database in parole chiare, come si confrontano i principali framework 2026 e quando ciascuno va bene, perche societa come Clerk e Convex fanno girare un sito marketing separato dalla loro app, e la regola onesta per sapere quando un monorepo paga. Alla fine, saprai abbozzare l'architettura di qualsiasi SaaS su un tovagliolo e spiegare perche ha quella forma. ## Prerequisiti Il Corso 1, soprattutto le lezioni sul setup di progetto e il deployment, perche le decisioni d'architettura si appoggiano su un ciclo costruire-e-pubblicare che funziona. Devi essere a tuo agio a eseguire comandi di terminale e aver pubblicato almeno una pagina. Se le parole "framework" o "TypeScript" sono ancora confuse, dai prima un'occhiata alle pagine dei fondamenti su cos'e un framework e cos'e TypeScript, poi torna. ## Il problema La maggior parte dei principianti mette insieme un'app copiando cio che un tutorial ha fatto, senza un modello di come i pezzi si articolano. Poi colpiscono un muro: il sito marketing e lento perche e impacchettato con tutta l'app, l'auth e i dati sono aggrovigliati nell'UI, e nessuno sa dire dove vive una data responsabilita. Il risultato e un'app difficile da cambiare e impossibile da ragionare. Niente di tutto cio e un problema di abilita di coding. E un modello mentale mancante. Questa lezione installa il modello, perche il tuo agente costruisca su suolo fermo invece che su un mucchio di snippet copiati. ## I tre strati: frontend, backend, database Ogni app web, per quanto elegante, sono tre strati che si passano il lavoro. Il frontend e cio che gira nel browser: l'HTML, il CSS e il JavaScript che disegnano lo schermo e reagiscono ai click. Il backend e il codice che gira su un server, lontano dall'utente, dove metti la logica e i segreti che il browser non deve vedere. Il database e dove i dati vivono durevolmente, perche sopravvivano a un aggiornamento di pagina e siano condivisi tra utenti. Una richiesta segue un percorso di andata e ritorno: il browser chiede qualcosa al backend, il backend legge o scrive il database e rimanda una risposta che il browser rende. La maggior parte della confusione su "dove va questo codice" si dissolve appena sai nominare a quale di questi tre strati appartiene un pezzo di lavoro. - Frontend: gira nel browser, disegna l'UI, non tiene mai segreti, tutti possono leggerlo. - Backend: gira su un server, tiene la logica di business e le chiavi API, parla al database. - Database: memorizza i dati durevolmente e li condivide tra utenti e sessioni. - Regola d'oro: un segreto (chiave API, password) appartiene al backend, mai al codice frontend, perche il browser consegna il suo codice a ogni visitatore. ## Cosa ti da un framework Un framework ti da struttura, routing e convenzioni, perche tu non assembli un'app a partire da file grezzi. Decide come gli URL sono mappati verso le pagine, come le pagine recuperano dati, come l'app e impacchettata e consegnata, e cento piccole cose che altrimenti reinventeresti. Le opzioni 2026 pendono ognuna in una direzione diversa, e la scelta giusta dipende da quanto contenuto contro app c'e nel tuo prodotto. - Astro: costruito per siti veloci e ricchi di contenuto - blog, doc, siti marketing. Consegna quasi nessun JavaScript per default, quindi le pagine caricano in fretta e rankano bene. Afferralo quando l'essenziale del tuo prodotto e contenuto. - Next.js: il framework React peso massimo per app ricche e interattive. Ecosistema enorme, rendering server e il default che molti team scelgono per una vera app prodotto. - TanStack Start: un framework React full-stack piu recente, costruito su TanStack Router, con un'eccellente type safety e una sensazione piu leggera e trasparente. E questa stessa piattaforma che gira su TanStack Start. - Vue (con Nuxt): la principale alternativa a React. Stesso job, sintassi e filosofia diverse. Scegli questo se tu o il tuo team pensate gia in Vue. Non devi padroneggiare tutti e quattro. Scegli un framework d'app e un framework di contenuto e attieniti a quelli. Una combinazione comune e sensata e Astro per il sito marketing e un framework React (Next.js o TanStack Start) per l'app. I nomi esatti contano meno della comprensione dell'asse: contenuto-veloce contro app-ricca. ## Lo split sito marketing contro app Ecco lo schema che confonde i principianti finche qualcuno non lo nomina: i prodotti seri fanno girare il loro sito marketing pubblico e la loro app connessa come due cose separate, spesso su due sottodomini. Guarda Clerk e Convex stessi - la homepage sul dominio nudo e un sito marketing veloce, e il dashboard vive a un indirizzo separato. Non e la stessa codebase a servire entrambi. La ragione e che le due superfici hanno bisogni opposti. I siti marketing pubblici devono essere ultra-veloci e pienamente indicizzabili da Google e dai crawler di IA, perche e cosi che ti si trova. L'app connessa puo essere piu pesante e riccamente interattiva, perche l'utente e gia arrivato e connesso, e il SEO non conta piu. Impacchettarli insieme forza un cattivo compromesso: o il tuo sito marketing si trascina tutta l'app e carica lentamente, o la tua app e bridata dai vincoli del sito marketing. Separarli lascia ciascuno ottimizzarsi per il suo vero job. - Sito marketing: dominio nudo (yoursite.com), veloce, ottimizzato SEO e GEO, spesso Astro. Il suo job e essere trovato e convertire i visitatori. - App: un sottodominio (app.yoursite.com), piu pesante, interattiva, dietro l'auth. Il suo job e consegnare il prodotto. Il SEO non conta qui. - L'auth e i dashboard (Clerk) e il tuo database (Convex) vivono lato app, mai impacchettati nei siti marketing. - Questo split e la ragione per cui la tua homepage puo raggiungere 100 su Lighthouse mentre la tua app e un'esperienza React ricca e a stato. ## Cos'e un monorepo e quando aiuta Un monorepo e un unico repository Git che contiene piu progetti collegati - diciamo il tuo sito marketing, la tua app e un pacchetto condiviso di componenti - invece di un repo per progetto. L'attrattiva e reale: condividi codice (tipi, componenti UI, utility) tra superfici senza pubblicare pacchetti, e un pull request puo cambiare tutto cio che deve cambiare insieme. I costi sono reali anche: i monorepo aggiungono overhead di tooling (gestore di workspace, build piu complesse, CI piu lenta se sei trascurato) di cui un principiante in solitaria non ha bisogno il primo giorno. La regola onesta: afferra un monorepo quando condividi davvero codice significativo tra due superfici o piu e la duplicazione ti fa male. Fino a li, repo separati sono piu semplici e perfettamente bene. Non adottare un monorepo perche una grande societa lo fa - loro hanno centinaia di ingegneri e tu hai un agente e un laptop. - Monorepo: un repo, piu progetti, codice condiviso, modifiche coordinate. - Vale la pena quando: il sito marketing e l'app condividono tipi o componenti e li cambi spesso insieme. - Saltalo quando: hai una sola app o due superfici che condividono a malapena codice. L'overhead non e gratis. - Puoi sempre partire con repo separati e fondere in monorepo piu tardi, quando il dolore e reale. ## Errori frequenti Gli errori ricorrenti in questa fase: impacchettare sito marketing e app in un progetto poi chiedersi perche la homepage e lenta e il SEO soffre; mettere una chiave API segreta nel codice frontend, dove ogni visitatore puo leggerla; adottare un monorepo il primo giorno perche sembra pro e annegare nella config di build; e scegliere un framework per hype invece di sapere se il tuo prodotto e ricco di contenuto o di app. Ognuno viene dal saltare il modello mentale. Nomina lo strato, nomina la superficie, e la struttura giusta segue. ## ROI business Un'architettura ben decisa all'inizio e quasi gratuita; mal decisa, tassa ogni cambiamento futuro. Uno split pulito marketing contro app significa che la tua homepage resta veloce ed e trovata, il che e la cima di tutto il tuo funnel - i siti marketing lenti ti costano in silenzio clienti e ranking di ricerca per sempre. Sapere quale strato possiede quale responsabilita significa che tu (e il tuo agente) pubblichi feature senza creare grovigli che richiedono piu tardi costose riscritture. I fondatori che si muovono piu in fretta non sono quelli che hanno scelto il framework piu di tendenza; sono quelli la cui architettura permette loro di cambiare una cosa senza romperne altre tre. ## Checklist Prima di andare avanti, assicurati di poter rispondere a questo senza tornare indietro. Questa mappa e sotto tutte le altre lezioni del corso. - Sai spiegare frontend, backend e database e quale tiene i segreti? - Sai dire quando scegliere Astro contro Next.js o TanStack Start? - Sai spiegare perche i team separano il sito marketing dall'app? - Sai enunciare la regola onesta su quando un monorepo vale la pena? ## Risorse Tieni nei preferiti la documentazione ufficiale dei framework che hai scelto - Astro, Next.js, TanStack Start e Nuxt hanno tutti eccellenti guide di avvio. Le pagine dei fondamenti su cos'e un framework e cos'e TypeScript sostengono questa lezione se un concetto e rimasto confuso. Le tre prossime lezioni riempiono i tre strati uno per uno: auth, poi dati, poi i segreti che li collegano. ## La tua missione Abbozza il tuo prodotto (o un prodotto che ammiri) come un diagramma a tre riquadri - frontend, backend, database - con una freccia che mostra una richiesta attraversarli. Poi segna quali parti sono il sito marketing e quali sono l'app. Cinque minuti con una penna rendono concreto il resto di questo corso, perche ora hai una vera forma a cui agganciare ogni nuovo pezzo. ## Prossima lezione Con un'architettura chiara, la prossima lezione aggiunge il primo vero blocco di costruzione: l'autenticazione con Clerk, incluso cos'e davvero OAuth, perche non devi mai costruire l'auth da solo e un percorso Google OAuth completo, da un'istanza di development alla produzione. ## Transcript Prima di collegare auth, dati e pagamenti, ti serve una mappa mentale di come si incastra un'applicazione moderna. Questa lezione spiega i framework come Next.js, Astro, TanStack Start e Vue, la ripartizione tra frontend, backend e database, perche team come Clerk e Convex separano il loro sito marketing veloce dall'app stessa, e quando un monorepo aiuta invece di intralciare.