Le applicazioni a pagina singola (SPA) sono diventate il modo moderno di creare applicazioni web e Inertia.js è uno strumento leader che permette a chi lavora nello sviluppo di creare SPA con rendering sia lato client che lato server.
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.
Ma prima di iniziare, assicuriamoci di aver capito come funzionano le applicazioni lato server e lato client.
Cos’È il Rendering Lato Server?
Il rendering lato server (SSR) è quando un’applicazione può eseguire il rendering o la visualizzazione del contenuto di una pagina web sul server anziché nel browser. Quando un utente tenta di visitare example.com, 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.
I motori di ricerca intervengono e indicizzano le informazioni fornite dal server prima che raggiungano il browser; questa operazione è nota come ottimizzazione per i motori di ricerca (SEO). Il browser risolve quindi il contenuto JavaScript e la pagina web viene visualizzata dall’utente.
Il problema dell’approccio SSR è 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.
Cos’È il Rendering Lato Client?
Il rendering lato client consente al browser di avere a disposizione tutto ciò 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.
Il rendering lato client ha contribuito alla creazione delle SPA, rivoluzionando il web. È possibile creare un sito web che non richiede il ricaricamento della pagina indipendentemente dal numero di link cliccati. In questo modo l’utente può navigare facilmente all’interno del sito.
Sebbene le SPA siano fantastiche, questo approccio presenta molte complessità 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.
Cos’È Inertia.js?
Inertia non è un framework JavaScript. 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à che ne deriva.
Inertia è stato progettato per accompagnare, non per sostituire, i framework che già usate. Consideratelo un utile alleato che vi aiuta a completare le attività in modo più 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.
Per la maggior parte degli sviluppatori e sviluppatrici Laravel, Inertia è una delle tecniche più affidabili per la costruzione di SPA, poiché permette di collegare sia il frontend che il backend.
Come Funziona Inertia.js?
Inertia è 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 è possibile grazie a Link, un wrapper per il tag di ancoraggio standard. Quando si fa clic su Link, 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é Inertia rimuove magicamente i componenti non necessari e li sostituisce con quelli necessari per visitare la nuova pagina e aggiorna lo stato della cronologia.
Un Approfondimento sulle Funzionalità di Inertia.js
Quando una persona visita inizialmente example.com, 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 con l’attributo data-page contenente i dati JSON della pagina iniziale. Inertia usa questi dati JSON per avviare il framework frontend e visualizzare la pagina iniziale.
Una volta avviata l’applicazione, ogni percorso che l’utente visita all’interno dello stesso dominio utilizzando Link sarà una richiesta XHR con l’header X-Inertia. Questo indica al server che si tratta di una richiesta di Inertia.
Il feedback sarà una risposta JSON con il contenuto della pagina, anziché una risposta HTML completa come nel caso della visita iniziale.
Quali Problemi Risolve Inertia.js?
Inertia risolve un gran numero di problemi per chi si occupa di sviluppo web. L’obiettivo della creazione di Inertia è stato quello di fornire soluzioni rapide ed efficaci a tutte le complessità legate alla progettazione di una SPA.
Complessità delle SPA
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.
Inertia è 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à legate alla creazione di SPA.
Creare una SPA con Inertia è 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.
La chiave è che le viste sono componenti JavaScript. Ciò 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à di creare API.
Autenticazione
Poiché Inertia alimenta l’applicazione con i dati e le risposte dal backend, utilizzerà 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.
Complessità SEO
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à a identificare il contenuto della pagina poiché il server risponderà con componenti JavaScript e dati JSON.
Inertia ha risolto questo problema introducendo la funzione di rendering lato server (SSR) che potete aggiungere alla vostra applicazione. Inertia usa l’ambiente Node.js come trigger per convertire la risposta dei dati JSON in HTML.
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.
Inertia offre anche un componente Head che vi permette di aggiungere un titolo e dei meta-dati alla vostra pagina:
<script setup>
import { Head } from '@inertiajs/inertia-vue3'
</script>
<template>
<Head>
<title>Page Title</title>
<meta name="description" content="Page Description" />
</Head>
</template>
Ecco un altro esempio tratto dalla documentazione online di Inertia:
// Layout.vue
import { Head } from '@inertiajs/inertia-vue3'
<Head>
<title>My app</title>
<meta head-key="description" name="description" content="This is the default description" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</Head>
// About.vue
import { Head } from '@inertiajs/inertia-vue3'
<Head>
<title>About - My app</title>
<meta head-key="description" name="description" content="This is a page specific description" />
</Head>
Moduli e Form Helper
È possibile inviare una richiesta di modulo standard mentre si usa Inertia. Tuttavia, questo comporta l’aggiornamento dell’intera pagina.
Inertia consente agli utenti di inviare richieste di moduli con Inertia, eliminando così la possibilità 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).
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:
<script setup>
import { useForm } from "@inertiajs/inertia-vue3";
const form = useForm({
email: null,
password: null,
});
</script>
<template>
<form @submit.prevent="form.post('kinsta/login')">
<input type="text" v-model="form.email" />
<input type="password" v-model="form.password" />
<button type="submit">Login</button>
</form>
</template>
Potete inviare il modulo con GET, POST, PUT, PATCH e DELETE.
<script setup>
import { useForm } from "@inertiajs/inertia-vue3";
const form = useForm({
email: null,
password: null,
});
const submit = () => {
form.post("kinsta/login");
};
</script>
<template>
<form @submit.prevent="submit()">
<input type="text" v-model="form.email" />
<input type="password" v-model="form.password" />
<button type="submit">Login</button>
</form>
</template>
L’helper per i moduli di Inertia offre anche alcune proprietà utili, come la proprietà processing che si trasforma in true quando il modulo inizia a essere elaborato. Questa proprietà può essere utilizzata per disabilitare i pulsanti di invio durante l’elaborazione del modulo per evitare invii multipli:
<button type="submit" :disabled="form.processing">Submit</button>
Puoi anche utilizzare le proprietà preserveState, preserveScroll e i callback degli eventi con il modulo, che ti saranno utili per aggiungere ulteriori opzioni al modulo:
form.post('kinsta/login, {
preserveScroll: true,
onSuccess: () => form.reset('password'),
})
Ricordare lo Stato con Inertia.js
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à alla pagina del modulo, l’input dell’utente sarà resettato.
Per fortuna, Inertia offre la funzione useRemember, che vi permette di salvare gli input del modulo dell’utente nello stato di cronologia e di ripristinarli al momento della navigazione.
Potete usare questa funzione importandola da Inertia e applicandola al vostro modulo:
import { useRemember } from '@inertiajs/inertia-vue3'
export default {
setup() {
const form = useRemember({
first_name: null,
last_name: null,
})
return { form }
},
}
Se avete una pagina con molti moduli che usano la funzione useRemember, ogni componente deve avere una chiave unica in modo che Inertia sappia quali dati ripristinare in ogni componente:
const form = useRemember({
first_name: null,
last_name: null,
}, 'Users/Create')
Non è necessario usare la funzione useRemember quando si utilizza il form helper di Inertia. Inertia ricorderà automaticamente lo stato dell’input del modulo, quindi dobbiamo solo fornire un identificatore unico:
import { useForm } from '@inertiajs/inertia-vue3'
const form = useForm('CreateUser', data)
L’aspetto positivo di questa funzionalità è che potete ricordare manualmente qualsiasi dato della vostra applicazione. Questo può essere utile anche per passare i dati da un componente profondamente annidato al componente principale:
import { Inertia } from '@inertiajs/inertia'
// DeeplyNestedComponent.vue
Inertia.remember(data, 'my-key')
// MainComponent.vue
let data = Inertia.restore('my-key')
Caricamento di File
Inertia rileva se il modulo include dei file e, in tal caso, trasforma i dati della richiesta nell’oggetto formData, che è sempre richiesto. Quindi, se avete un modulo che include un nome e un avatar, Inertia tratterà il modulo come multipart/form-data.
Convalida ed Errori
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.
Poiché 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.
Una volta trovati gli errori, fornisce un callback onError() invece di onSuccess().
Ecco un esempio con Vue 3 che aiuta a capire il concetto:
const submit = () => {
form.post("kinsta/login", {
onError: () => {
return "Hi! , the server returned an error and Inertia saved it as a prop. Do as you like with me"
},
onSuccess: () => {
return "Wohoo!!"
}
}
);
};
Visualizzare gli errori è semplice, basta definirli come props e mostrarli in modo condizionato nel vostro HTML:
<script setup>
defineProps({
errors: Object,
});
//
</script>
<template>
<form @submit.prevent="submit()">
//
<div v-if="errors.email">{{ errors.email }}</div>
</form>
</template>
Usando Inertia, non dovrete preoccuparvi dei vecchi dati di input in caso di errori. Una volta che Inertia rileva che l’utente è stato reindirizzato alla pagina con errori, conserva automaticamente il vecchio stato del componente per POST, PUT, PATCH e DELETE.
Reload Parziali con Inertia.js
La funzionalità di reload parziale di Inertia è eccellente perché 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ù su come ottimizzare le prestazioni della vostra applicazione Laravel.
I reload parziali possono essere eseguiti utilizzando la proprietà only di Inertia:
import { Inertia } from '@inertiajs/inertia'
Inertia.visit(url, {
only: ['users'],
})
Reindirizzamenti Esterni con Inertia.js
Il routing del sottodominio, o reindirizzamento esterno, è una delle sfide più frustranti delle SPA. È irrazionale aspettarsi che la vostra applicazione rimanga un’applicazione a pagina singola pur visitando un dominio diverso.
Potrebbe essere necessario reindirizzare una richiesta Inertia verso un sito web esterno o addirittura verso un altro endpoint non Inertia della vostra applicazione. Questo è possibile attraverso una visita window.location avviata lato server:
return Inertia::location($url);
Se aprite la console durante la prova, scoprirete che la risposta è 409 conflict. Questa risposta contiene l’URL nell’header X-Inertia-Location, che Inertia rileverà sul lato client ed eseguirà automaticamente la visita.
Come Lavorare con Inertia.js
Lavorare con Inertia è 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à al vostro framework frontend.
Percorsi Laravel e Inertia.js
Il routing di Laravel non è un elemento a cui dovete rinunciare durante lo sviluppo della vostra applicazione; vi permette di costruire rapidamente i percorsi più complessi e ci sono molte risorse gratuite e a pagamento su Laravel che vi possono aiutare a saperne di più su Laravel e sul funzionamento del routing.
Il bello è che non avete bisogno di Vue Router o React Router per realizzare un semplice routing lato client, perché 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.
Route::inertia('/home', 'HomeComponent');
public function index()
{
return Inertia::render('Users/Index', [
'users' => User::all();
'create_url' => URL::route('users.create'),
]);
}
Prima di proseguire, vorremmo presentarvi DevKinsta, un potente strumento per developer, designer e agenzie che permette di costruire applicazioni web WordPress a una o più pagine. Per fortuna WordPress può essere integrato con Laravel grazie al pacchetto Corcel. Se costruite un’app Laravel con l’integrazione di WordPress, date un’occhiata a Kinsta APM Tool per un monitoraggio straordinario delle prestazioni.
Reindirizzamenti
Dovete sempre reindirizzare l’utente al percorso corretto che corrisponde alla richiesta iniziale. Per esempio, se un utente si rivolge all’endpoint store per inviare un articolo, assicuratevi di reindirizzare il cliente all’endpoint GET magari al percorso del post.
public function store()
{
Post::create(
Request::validate([
'title' => ['required'],
'body' => ['required'],
])
);
// redirect the user to the posts show page
return Redirect::route('posts.show');
}
Svantaggi dell’Uso di Inertia.js
Finora ci siamo concentrati sui numerosi vantaggi dell’uso di Inertia. Tuttavia, come ogni strumento, anche Inertia ha degli svantaggi.
- L’utente deve avere una conoscenza di base di Vue o React.
- Poiché i dati del modello possono essere passati completamente al lato client, l’utente deve assicurarsi di restituire esplicitamente i dati rilevanti al frontend.
- Le API devono essere ricreate se l’applicazione web deve avere un’applicazione Android o iOS in qualsiasi momento.
Dovreste Usare Inertia.js?
Per rispondere alla domanda se usare o meno Inertia, la risposta è sì, se volete costruire un’app moderna a pagina singola, lato server e orientata alla SEO.
Potete saperne di più visitando il sito ufficiale di Inertia.js e leggendo la documentazione.
Riepilogo
Le applicazioni lato client e le SPA stanno diventando sempre più popolari grazie all’evoluzione delle tecnologie web, mentre le applicazioni tradizionali lato server hanno iniziato a cadere in disuso. Oggi più che mai è importante avere a disposizione gli strumenti giusti.
Inertia è un fantastico approccio o una soluzione moderna per developer lato server che creano applicazioni a pagina singola. Risolve molti problemi e fa risparmiare molto tempo.
Come abbiamo detto nel nostro articolo, Inertia ora supporta il rendering lato server, il che lo porta a un livello completamente nuovo, consentendo di sviluppare SPA SEO-driven.
Inertia sta ricevendo anche molto apprezzamento da parte della comunità. Lo sforzo di sviluppo è sponsorizzato da Laravel Forge, Laracasts e da una serie di altre ottime organizzazioni. Di conseguenza, Inertia è uno strumento affidabile che verrà migliorato e mantenuto in futuro per gli sviluppatrici e sviluppatori Laravel, soprattutto perché la richiesta di persone esperte di programmazione Laravel continua a crescere.
Se state cercando una nuova casa per il vostro progetto basato su Inertia, date un’occhiata alle offerte di hosting di applicazioni di Kinsta.
