Quando conviene un framework: la domanda giusta non è quante schermate

1// La domanda che decide, e non è "quante schermate ho".2// È: QUANTI TIPI DI STATO diversi deve gestire l'interfaccia?3​4// 1. Stato del server (dati che vivono altrove: elenchi, dettagli, profili)5//    → non è "stato": è una CACHE di dati remoti. Ha bisogno di6//      invalidazione, rifetch, deduplica, gestione degli errori.7//      È il 70% di ciò che le persone mettono in uno store globale, ed8//      è il posto sbagliato: uno store non sa quando il dato è vecchio.9​10// 2. Stato dell'URL (filtri, pagina corrente, ordinamento, tab aperta)11//    → deve stare nella querystring, non in memoria. Altrimenti un link12//      condiviso non riproduce quello che l'utente stava guardando, e13//      il tasto "indietro" fa la cosa sbagliata.14​15// 3. Stato locale del componente (un menù aperto, un campo in scrittura)16//    → useState, e non deve uscire da lì.17​18// 4. Stato condiviso davvero globale (utente autenticato, tema, carrello)19//    → questo, e solo questo, giustifica uno store.20//      Nella maggior parte delle applicazioni sono tre o quattro valori.21​22// Se dopo questa suddivisione il punto 4 è quasi vuoto, probabilmente23// non serviva un framework: serviva un modo migliore di leggere i dati.

1// ✗ Il modello che genera più codice e più bug: i dati remoti trattati2//   come stato locale. Tre useState, un useEffect, e le condizioni di3//   corsa da gestire a mano.4function Fatture() {5  const [dati, setDati] = useState(null);6  const [caricamento, setCaricamento] = useState(true);7  const [errore, setErrore] = useState(null);8​9  useEffect(() => {10    let annullato = false;                    // ← e chi se lo ricorda sempre11    fetch('/api/fatture')12      .then(r => r.json())13      .then(d => { if (!annullato) setDati(d); })14      .catch(e => { if (!annullato) setErrore(e); })15      .finally(() => { if (!annullato) setCaricamento(false); });16    return () => { annullato = true; };17  }, []);18  ...19}20​21// ✓ Una libreria di data fetching fa questo, più deduplica, cache,22//   rifetch alla riconnessione e invalidazione dichiarativa.23function Fatture() {24  const { data, isPending, error } = useQuery({25    queryKey: ['fatture'],26    queryFn: () => fetch('/api/fatture').then(r => r.json())27  });28  ...29}

1// Il punto in cui il discorso è cambiato: rendere lato server non è più2// una scelta fra "tutto sul client" e "tutto sul server".3//4//   Componente server  → gira sul server, non arriva mai al browser.5//                        Può leggere il database direttamente.6//                        Zero JavaScript spedito per quella parte.7//8//   Componente client  → 'use client', arriva al browser, ha stato9//                        e gestori di eventi.10//11// La conseguenza pratica: il peso del JavaScript non è più proporzionale12// alla complessità dell'applicazione, ma alla sua INTERATTIVITÀ. Una13// dashboard con molte tabelle e pochi controlli può spedire pochissimo.14//15// Il costo: serve un runtime Node in produzione, il modello mentale è16// più complesso, e il confine fra server e client è un posto nuovo in17// cui sbagliare (un segreto letto in un componente server e passato18// come prop a uno client finisce nel bundle).

1// vite.config.ts — le tre cose che vale la pena configurare subito,2// e che quasi nessuno configura.3import { defineConfig } from 'vite';4import react from '@vitejs/plugin-react';5import { visualizer } from 'rollup-plugin-visualizer';6​7export default defineConfig({8  plugins: [9    react(),10    // 1. Vedere COSA c'è nel bundle. Senza, si scopre a progetto finito11    //    di aver incluso una libreria di date da 300 KB per formattare12    //    tre timestamp.13    visualizer({ open: true, gzipSize: true })14  ],15  build: {16    target: 'es2020',17    // 2. Un tetto esplicito: se il bundle lo supera, la build avvisa.18    chunkSizeWarningLimit: 250,19    rollupOptions: {20      output: {21        // 3. Separare le dipendenze dal proprio codice: cambiando una22        //    riga di applicazione, i visitatori non riscaricano React.23        manualChunks: {24          react: ['react', 'react-dom'],25          router: ['react-router']26        }27      }28    }29  }30});