{"id":61668,"date":"2022-11-07T12:01:47","date_gmt":"2022-11-07T11:01:47","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=61668&post_type=knowledgebase&preview_id=61668"},"modified":"2025-10-01T20:45:18","modified_gmt":"2025-10-01T19:45:18","slug":"inertia-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/inertia-js\/","title":{"rendered":"Guida Definitiva a Inertia.js"},"content":{"rendered":"

Le applicazioni a pagina singola (SPA) sono diventate il modo moderno di creare applicazioni web e Inertia.js \u00e8 uno strumento leader che permette a chi lavora nello sviluppo di creare SPA con rendering sia lato client che lato server.<\/p>\n

In questo articolo vedremo come Inertia semplifica la costruzione di SPA e come risolve molti altri problemi di sviluppo. Inoltre, illustreremo le caratteristiche principali dello strumento.<\/p>\n

Ma prima di iniziare, assicuriamoci di aver capito come funzionano le applicazioni lato server e lato client.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Cos’\u00c8 il Rendering Lato Server?<\/h2>\n

Il rendering lato server (SSR) \u00e8 quando un’applicazione pu\u00f2 eseguire il rendering o la visualizzazione del contenuto di una pagina web sul server anzich\u00e9 nel browser. Quando un utente tenta di visitare example.com<\/strong>, il browser fa una richiesta al server chiedendo tutte le informazioni necessarie per visualizzare questa specifica pagina web e il server risponde immediatamente fornendo al browser una pagina completamente renderizzata.<\/p>\n

I motori di ricerca intervengono e indicizzano le informazioni fornite dal server prima che raggiungano il browser; questa operazione \u00e8 nota come ottimizzazione per i motori di ricerca (SEO). Il browser risolve quindi il contenuto JavaScript e la pagina web viene visualizzata dall’utente.<\/p>\n

\"Un
Visualizzazione del contenuto renderizzato sul lato server.<\/figcaption><\/figure>\n

Il problema dell’approccio SSR \u00e8 che il caricamento di una pagina completamente renderizzata dal server richiede molto tempo e non offre un’esperienza piacevole all’utente. Per questo motivo gli sviluppatori prendono in considerazione le SPA e il rendering lato client.<\/p>\n\n

Cos’\u00c8 il Rendering Lato Client?<\/h2>\n

Il rendering lato client consente al browser di avere a disposizione tutto ci\u00f2 che serve per il rendering della pagina web dal lato client, invece di ricevere una pagina completamente renderizzata dal server. Quando la pagina viene caricata, il browser non invia altre richieste al server, rendendo l’esperienza di navigazione estremamente veloce.<\/p>\n

\"Un
Visualizzazione di contenuti renderizzati sul lato client.<\/figcaption><\/figure>\n

Il rendering lato client ha contribuito alla creazione delle SPA, rivoluzionando il web. \u00c8 possibile creare un sito web che non richiede il ricaricamento della pagina indipendentemente dal numero di link cliccati. In questo modo l’utente pu\u00f2 navigare facilmente all’interno del sito.<\/p>\n

Sebbene le SPA siano fantastiche, questo approccio presenta molte complessit\u00e0 e problemi che affronteremo in questo articolo. Inertia risolve la maggior parte di questi problemi utilizzando in modo efficace i framework lato server. Combina le migliori caratteristiche delle applicazioni lato server e lato client.<\/p>\n

Cos’\u00c8 Inertia.js?<\/h2>\n

Inertia non \u00e8 un framework JavaScript<\/a>. Si tratta invece di una strategia o tecnica per lo sviluppo di SPA. Permette a chi sviluppa di usare gli attuali framework lato server per costruire una SPA moderna senza la complessit\u00e0 che ne deriva.<\/p>\n

Inertia \u00e8 stato progettato per accompagnare, non per sostituire, i framework che gi\u00e0 usate. Consideratelo un utile alleato che vi aiuta a completare le attivit\u00e0 in modo pi\u00f9 rapido ed efficiente. Al momento supporta tre framework frontend (Vue, React e Svelte) per il rendering lato client e due framework backend (Laravel e Rails) per il rendering lato server.<\/p>\n

Per la maggior parte degli sviluppatori e sviluppatrici Laravel<\/a>, Inertia \u00e8 una delle tecniche pi\u00f9 affidabili per la costruzione di SPA, poich\u00e9 permette di collegare sia il frontend che il backend.<\/p>\n

Come Funziona Inertia.js?<\/h2>\n

Inertia \u00e8 simile a Vue Router, in quanto permette di spostarsi tra le pagine senza dover ricaricare l’intera pagina. Tuttavia, Inertia funziona in sincronia con il vostro framework lato server. Questo \u00e8 possibile grazie a Link<\/code>, un wrapper per il tag di ancoraggio standard. Quando si fa clic su Link<\/code>, Inertia intercetta l’evento del clic e invia una richiesta XHR al server, il quale riconosce che si tratta di una richiesta di Inertia e restituisce una risposta JSON. Questa risposta include il nome e i dati del componente JavaScript, dopodich\u00e9 Inertia rimuove magicamente i componenti non necessari e li sostituisce con quelli necessari per visitare la nuova pagina e aggiorna lo stato della cronologia.<\/p>\n

Un Approfondimento sulle Funzionalit\u00e0 di Inertia.js<\/h3>\n

Quando una persona visita inizialmente example.com<\/strong>, il browser esegue una richiesta standard a pagina intera e il server restituisce una risposta HTML completa come se Inertia non esistesse. Questa risposta HTML contiene tutti gli asset del sito (CSS, JavaScript), ma anche un asset extra per Inertia, ovvero la root div<\/code> con l’attributo data-page<\/code> contenente i dati JSON della pagina iniziale. Inertia usa questi dati JSON per avviare il framework frontend e visualizzare la pagina iniziale.<\/p>\n

\"Diagramma
Inertia.js: risposta alla visita della pagina iniziale.<\/figcaption><\/figure>\n

Una volta avviata l’applicazione, ogni percorso che l’utente visita all’interno dello stesso dominio utilizzando Link<\/code> sar\u00e0 una richiesta XHR con l\u2019header X-Inertia<\/code>. Questo indica al server che si tratta di una richiesta di Inertia.<\/p>\n

Il feedback sar\u00e0 una risposta JSON con il contenuto della pagina, anzich\u00e9 una risposta HTML completa come nel caso della visita iniziale.<\/p>\n

\"Diagramma
Inertia.js: risposta alla visita del percorso successivo.<\/figcaption><\/figure>\n

Quali Problemi Risolve Inertia.js?<\/h2>\n

Inertia risolve un gran numero di problemi per chi si occupa di sviluppo web. L’obiettivo della creazione di Inertia \u00e8 stato quello di fornire soluzioni rapide ed efficaci a tutte le complessit\u00e0 legate alla progettazione di una SPA.<\/p>\n

Complessit\u00e0 delle SPA<\/h3>\n

Se sviluppatrici e sviluppatori dovessero costruire una SPA senza Inertia, dovrebbero creare API REST o GraphQL e proteggerle con un qualche metodo di autenticazione, il che richiederebbe la creazione di un sistema di gestione dello stato front-end, oltre a molte altre cose.<\/p>\n

Inertia \u00e8 stato progettato per aiutare i professionisti dello sviluppo a trasformare le loro applicazioni lato server che girano completamente sul server backend in un’applicazione JavaScript a pagina singola senza dover affrontare tutte le complessit\u00e0 legate alla creazione di SPA.<\/p>\n

Creare una SPA con Inertia \u00e8 simile alla creazione di un’applicazione renderizzata lato server. Si creano dei controller, si effettuano delle query al database per ottenere i dati necessari e si restituiscono i risultati alle viste.<\/p>\n

La chiave \u00e8 che le viste sono componenti JavaScript. Ci\u00f2 significa che ricevete i dati dal server e poi Inertia lavora con il framework frontend per mostrare la pagina contenente i dati come file JavaScript, eliminando la necessit\u00e0 di creare API.<\/p>\n

Autenticazione<\/h3>\n

Poich\u00e9 Inertia alimenta l’applicazione con i dati e le risposte dal backend, utilizzer\u00e0 semplicemente il sistema di autenticazione che avete lato server. Questo significa che non dovrete preoccuparvi dell’autenticazione lato client, ma avrete un sistema di autenticazione basato sulla sessione che si sincronizza con il sistema di autenticazione lato server.<\/p>\n

Complessit\u00e0 SEO<\/h3>\n

Come spiegato in precedenza per il rendering lato server, i motori di ricerca intercettano la risposta del server al browser per indicizzare il contenuto HTML della pagina web. Nel caso di una SPA, i motori di ricerca avranno difficolt\u00e0 a identificare il contenuto della pagina poich\u00e9 il server risponder\u00e0 con componenti JavaScript e dati JSON.<\/p>\n

Inertia ha risolto questo problema introducendo la funzione di rendering lato server (SSR)<\/a> che potete aggiungere alla vostra applicazione. Inertia usa l’ambiente Node.js come trigger per convertire la risposta dei dati JSON in HTML.<\/p>\n

Per illustrare meglio questo aspetto, immaginate che Inertia si collochi tra il server e il browser, osservandolo. Quando il server riceve una richiesta di Inertia e restituisce una risposta JSON, Inertia rileva l’esistenza di un server Node.js, trasforma la risposta JSON in HTML e la restituisce, permettendo ai motori di ricerca di indicizzare la pagina come se l’applicazione non fosse una SPA.<\/p>\n

Inertia offre anche un componente Head<\/code> che vi permette di aggiungere un titolo e dei meta-dati alla vostra pagina:<\/p>\n

\n<script setup>\nimport { Head } from '@inertiajs\/inertia-vue3'\n<\/script>\n\n<template>\n  <Head>\n    <title>Page Title<\/title>\n    <meta name=\"description\" content=\"Page Description" \/>\n  <\/Head>\n<\/template>\n<\/code><\/pre>\n
Ecco un altro esempio tratto dalla documentazione online di Inertia<\/a>:<\/p>\n
\n\/\/ Layout.vue\n\nimport { Head } from '@inertiajs\/inertia-vue3'\n\n<Head>\n  <title>My app<\/title>\n  <meta head-key=\"description\" name=\"description\" content=\"This is the default description\" \/>\n  <link rel=\"icon\" type=\"image\/svg+xml\" href=\"\/favicon.svg\" \/>\n<\/Head>\n\n\/\/ About.vue\n\nimport { Head } from '@inertiajs\/inertia-vue3'\n\n<Head>\n  <title>About - My app<\/title>\n  <meta head-key=\"description\" name=\"description\" content=\"This is a page specific description\" \/>\n<\/Head>\n<\/code><\/pre>\n
Moduli e Form Helper<\/h3>\n
\u00c8 possibile inviare una richiesta di modulo standard mentre si usa Inertia. Tuttavia, questo comporta l’aggiornamento dell’intera pagina.<\/p>\n
Inertia consente agli utenti di inviare richieste di moduli con Inertia, eliminando cos\u00ec la possibilit\u00e0 di aggiornare la pagina. Una volta che il modulo viene inviato con Inertia, viene gestito dal lato server, permettendovi di reindirizzare l’utente alla stessa pagina (o a una pagina completamente diversa).<\/p>\n
Inertia ci semplifica la vita nella creazione e nell’invio dei moduli. Ecco un esempio di come potete usarlo con Vue.js 3 composition API:<\/p>\n
\n<script setup>\n  import { useForm } from \"@inertiajs\/inertia-vue3\";\n\n  const form = useForm({\n    email: null,\n    password: null,\n  });\n<\/script>\n\n<template>\n  <form @submit.prevent=\"form.post('kinsta\/login')\">\n    \n    <input type=\"text\" v-model=\"form.email\" \/>\n    \n    <input type=\"password\" v-model=\"form.password\" \/>\n    \n    <button type=\"submit\">Login<\/button>\n  <\/form>\n<\/template>\n<\/code><\/pre>\n
Potete inviare il modulo con GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code> e DELETE<\/code>.<\/p>\n
\n<script setup>\n  import { useForm } from \"@inertiajs\/inertia-vue3\";\n\n  const form = useForm({\n    email: null,\n    password: null,\n  });\n\n  const submit = () => {\n    form.post(\"kinsta\/login\");\n  };\n<\/script>\n\n<template>\n  <form @submit.prevent=\"submit()\">\n    \n    <input type=\"text\" v-model=\"form.email\" \/>\n    \n    <input type=\"password\" v-model=\"form.password\" \/>\n    \n    <button type=\"submit\">Login<\/button>\n  <\/form>\n<\/template>\n<\/code><\/pre>\n
L’helper per i moduli di Inertia offre anche alcune propriet\u00e0 utili, come la propriet\u00e0 processing<\/code> che si trasforma in true<\/code> quando il modulo inizia a essere elaborato. Questa propriet\u00e0 pu\u00f2 essere utilizzata per disabilitare i pulsanti di invio durante l’elaborazione del modulo per evitare invii multipli:<\/p>\n
\n<button type=\"submit\" :disabled=\"form.processing\">Submit<\/button>\n<\/code><\/pre>\n
Puoi anche utilizzare le propriet\u00e0 preserveState<\/code>, preserveScroll<\/code> e i callback degli eventi con il modulo, che ti saranno utili per aggiungere ulteriori opzioni al modulo:<\/p>\n
\nform.post('kinsta\/login, {\n  preserveScroll: true,\n  onSuccess: () => form.reset('password'),\n})\n<\/code><\/pre>\n
Ricordare lo Stato con Inertia.js<\/h3>\n
Supponiamo che un utente stia compilando un modulo sul vostro sito web e decida di navigare verso un’altra pagina prima di inviarlo. Quando torner\u00e0 alla pagina del modulo, l’input dell’utente sar\u00e0 resettato.<\/p>\n
Per fortuna, Inertia offre la funzione useRemember<\/code>, che vi permette di salvare gli input del modulo dell’utente nello stato di cronologia e di ripristinarli al momento della navigazione.<\/p>\n
Potete usare questa funzione importandola da Inertia e applicandola al vostro modulo:<\/p>\n
\nimport { useRemember } from '@inertiajs\/inertia-vue3'\n\nexport default {\n  setup() {\n    const form = useRemember({\n        first_name: null,\n        last_name: null,\n    })\n\n    return { form }\n  },\n}\n<\/code><\/pre>\n
Se avete una pagina con molti moduli che usano la funzione useRemember<\/code>, ogni componente deve avere una chiave unica in modo che Inertia sappia quali dati ripristinare in ogni componente:<\/p>\n
\nconst form = useRemember({\n        first_name: null,\n        last_name: null,\n    }, 'Users\/Create')\n<\/code><\/pre>\n
Non \u00e8 necessario usare la funzione useRemember<\/code> quando si utilizza il form helper di Inertia. Inertia ricorder\u00e0 automaticamente lo stato dell’input del modulo, quindi dobbiamo solo fornire un identificatore unico:<\/p>\n
\nimport { useForm } from '@inertiajs\/inertia-vue3'\n\nconst form = useForm('CreateUser', data)\n<\/code><\/pre>\n
L’aspetto positivo di questa funzionalit\u00e0 \u00e8 che potete ricordare manualmente qualsiasi dato della vostra applicazione. Questo pu\u00f2 essere utile anche per passare i dati da un componente profondamente annidato al componente principale:<\/p>\n
\nimport { Inertia } from '@inertiajs\/inertia'\n\n\/\/ DeeplyNestedComponent.vue\nInertia.remember(data, 'my-key')\n\n\/\/ MainComponent.vue\nlet data = Inertia.restore('my-key')\n<\/code><\/pre>\n
Caricamento di File<\/h3>\n
Inertia rileva se il modulo include dei file e, in tal caso, trasforma i dati della richiesta nell’oggetto formData<\/code>, che \u00e8 sempre richiesto. Quindi, se avete un modulo che include un nome e un avatar, Inertia tratter\u00e0 il modulo come multipart\/form-data<\/code>.<\/p>\n
Convalida ed Errori<\/h3>\n
Quando un utente invia un modulo con valori errati e questo viene inviato al server per la convalida, l’utente ritorna alla pagina del modulo con una serie di errori di convalida nella sessione. Inertia cattura gli errori dalla sessione e li salva come props della pagina.<\/p>\n
Poich\u00e9 i props sono reattivi, appaiono quando l’invio del modulo viene completato. Per rilevare l’esistenza di errori, Inertia tiene d’occhio page.props.errors<\/code>.<\/p>\n
Una volta trovati gli errori, fornisce un callback onError()<\/code> invece di onSuccess()<\/code>.<\/p>\n
Ecco un esempio con Vue 3 che aiuta a capire il concetto:<\/p>\n
\nconst submit = () => {\n    form.post(\"kinsta\/login\", {\n        onError: () => {\n            return \"Hi! , the server returned an error and Inertia saved it as a prop. Do as you like with me\"\n        },\n        onSuccess: () => {\n            return \"Wohoo!!\"\n        }\n    }\n    );\n  };\n<\/code><\/pre>\n
Visualizzare gli errori \u00e8 semplice, basta definirli come props e mostrarli in modo condizionato nel vostro HTML:<\/p>\n
\n<script setup>\n  defineProps({\n    errors: Object,\n  });\n\n\/\/\n<\/script>\n\n<template>\n  <form @submit.prevent=\"submit()\">\n    \/\/\n    <div v-if=\"errors.email\">{{ errors.email }}<\/div>\n  <\/form>\n<\/template>\n<\/code><\/pre>\n
Usando Inertia, non dovrete preoccuparvi dei vecchi dati di input in caso di errori. Una volta che Inertia rileva che l’utente \u00e8 stato reindirizzato alla pagina con errori, conserva automaticamente il vecchio stato del componente per POST<\/code>, PUT<\/code>, PATCH<\/code> e DELETE<\/code>.<\/p>\n
Reload Parziali con Inertia.js<\/h3>\n
La funzionalit\u00e0 di reload parziale di Inertia \u00e8 eccellente perch\u00e9 ricarica solo un componente selezionato nella pagina invece di recuperare l’intero set di dati dal server. Questo porta l’ottimizzazione dell’applicazione a un livello superiore. Potete anche visitare il seguente link per saperne di pi\u00f9 su come ottimizzare le prestazioni della vostra applicazione Laravel<\/a>.<\/p>\n
I reload parziali possono essere eseguiti utilizzando la propriet\u00e0 only<\/code> di Inertia:<\/p>\n
\nimport { Inertia } from '@inertiajs\/inertia'\n\nInertia.visit(url, {\n  only: ['users'],\n})\n<\/code><\/pre>\n
Reindirizzamenti Esterni con Inertia.js<\/h3>\n
Il routing del sottodominio, o reindirizzamento esterno, \u00e8 una delle sfide pi\u00f9 frustranti delle SPA. \u00c8 irrazionale aspettarsi che la vostra applicazione rimanga un’applicazione a pagina singola pur visitando un dominio diverso.<\/p>\n
Potrebbe essere necessario reindirizzare una richiesta Inertia verso un sito web esterno o addirittura verso un altro endpoint non Inertia della vostra applicazione. Questo \u00e8 possibile attraverso una visita window.location<\/code> avviata lato server:<\/p>\n
\nreturn Inertia::location($url);\n<\/code><\/pre>\n
Se aprite la console durante la prova, scoprirete che la risposta \u00e8 409 conflict<\/code>. Questa risposta contiene l’URL nell\u2019header X-Inertia-Location<\/code>, che Inertia rilever\u00e0 sul lato client ed eseguir\u00e0 automaticamente la visita.<\/p>\n
Come Lavorare con Inertia.js<\/h2>\n
Lavorare con Inertia \u00e8 simile a lavorare su un’applicazione lato server, con l’eccezione che si tratta di un’applicazione a pagina singola completamente reattiva. Dovreste essere in grado di definire le vostre rotte, personalizzare i controller e restituire una vista che Inertia invier\u00e0 al vostro framework frontend.<\/p>\n
Percorsi Laravel e Inertia.js<\/h3>\n
Il routing di Laravel non \u00e8 un elemento a cui dovete rinunciare durante lo sviluppo della vostra applicazione; vi permette di costruire rapidamente i percorsi pi\u00f9 complessi e ci sono molte risorse gratuite e a pagamento su Laravel<\/a> che vi possono aiutare a saperne di pi\u00f9 su Laravel e sul funzionamento del routing.<\/p>\n
Il bello \u00e8 che non avete bisogno di Vue Router o React Router per realizzare un semplice routing lato client, perch\u00e9 Inertia ha un proprio sistema di routing che funziona con il routing di Laravel. Se il lavoro non richiede dati di backend, potete usare l’helper del router per indirizzare direttamente a un componente.<\/p>\n
\nRoute::inertia('\/home', 'HomeComponent');\n<\/code><\/pre>\n
\npublic function index()\n    {\n    return Inertia::render('Users\/Index', [\n        'users' => User::all();\n        'create_url' => URL::route('users.create'),\n    ]);\n}\n<\/code><\/pre>\n
Prima di proseguire, vorremmo presentarvi DevKinsta<\/a>, un potente strumento per developer, designer e agenzie che permette di costruire applicazioni web WordPress a una o pi\u00f9 pagine. Per fortuna WordPress pu\u00f2 essere integrato con Laravel grazie al pacchetto Corcel<\/a>. Se costruite un’app Laravel con l’integrazione di WordPress, date un’occhiata a Kinsta APM Tool<\/a> per un monitoraggio straordinario delle prestazioni.<\/p>\n
Reindirizzamenti<\/h3>\n
Dovete sempre reindirizzare l’utente al percorso corretto che corrisponde alla richiesta iniziale. Per esempio, se un utente si rivolge all’endpoint store<\/code> per inviare un articolo, assicuratevi di reindirizzare il cliente all’endpoint GET<\/code> magari al percorso del post.<\/p>\n
\npublic function store()\n{\n    Post::create(\n        Request::validate([\n            'title' => ['required'],\n            'body' => ['required'],\n        ])\n    );\n\n    \/\/ redirect the user to the posts show page\n    return Redirect::route('posts.show');\n}\n<\/code><\/pre>\n
Svantaggi dell’Uso di Inertia.js<\/h2>\n
Finora ci siamo concentrati sui numerosi vantaggi dell’uso di Inertia. Tuttavia, come ogni strumento, anche Inertia ha degli svantaggi.<\/p>\n