Oggi, nello sviluppo web, la separazione dei sistemi frontend e backend ha acquisito notevole importanza e i siti headless sono sempre più popolari.
Tradizionalmente, nei sistemi di gestione dei contenuti (CMS), il back end e il front end sono sempre stati abbinati, ma questo ha sempre comportato molte limitazioni, come scarsa flessibilità e ridotta scalabilità. I moderni CMS headless consentono agli sviluppatori di disabbinare il frontend, sviluppato con qualsiasi framework, dal backend in un CMS headless.
Cos’è un CMS headless?
Un CMS headless è un sistema di gestione dei contenuti specializzato che serve esclusivamente alla gestione del backend del sito. A differenza dei CMS tradizionali, un CMS headless non determina il modo in cui i contenuti appaiono sul frontend. Al contrario, fornisce una Application Programming Interface (API) che consente agli sviluppatori di recuperare e distribuire i contenuti su qualsiasi dispositivo o piattaforma.
Oggi esistono numerose piattaforme CMS headless. Tuttavia, il passaggio dei contenuti da WordPress può sembrare inutile. Ma esiste un’alternativa: WordPress Headless.
WordPress Headless
WordPress, nella sua forma tradizionale, non è intrinsecamente un CMS Headless. È un CMS potente, noto per la facilità d’uso e la flessibilità nella creazione e nella gestione dei contenuti. Tuttavia, tradizionalmente combina la gestione dei contenuti e la loro presentazione in un unico sistema.
Oggi gli sviluppatori hanno creato implementazioni headless di WordPress utilizzando le API REST. In questi casi, WordPress funziona ancora come un CMS in cui creare, gestire e archiviare i contenuti. Tuttavia, invece di rendere il frontend o il sito web direttamente attraverso i template e i temi, la presentazione del frontend è disabbinata o distaccata dal backend.
Questo permette agli sviluppatori di creare applicazioni utilizzando tecnologie e framework diversi, pur sfruttando le note funzionalità di gestione dei contenuti di WordPress. È un modo per far funzionare WordPress in modalità “headless”, anche se non è la configurazione predefinita.
Questo articolo illustra due approcci per recuperare i dati dal CMS WordPress headless e renderli grazie al framework utilizzato per la creazione del frontend: WPGraphQL e REST API.
L’API REST con WordPress Headless
L’API REST è un pilastro fondamentale nello sviluppo di WordPress perché permette di recuperare i dati in formato JSON. A partire da WordPress 4.7, è stata integrata in WordPress e non richiede l’installazione di un plugin.
L’API dà accesso ai contenuti del sito con le stesse restrizioni: i contenuti pubblici del sito sono accessibili pubblicamente tramite l’API REST, mentre i contenuti privati, quelli protetti da password, gli utenti interni, i custom post type e i metadati sono disponibili solo con l’autenticazione o se sono stati configurati in modo specifico.
Per ottenere i dati di WordPress in formato JSON, aggiungiamo /wp-json all’URL del sito WordPress:
http://yoursite.com/wp-jsonSe l’API JSON non è abilitata di default, quando visitiamo il sito http://yoursite.com/wp-json, possiamo abilitarla dalla pagina Permalink nelle Impostazioni di WordPress e selezionando Nome del post o qualsiasi altra opzione a nostra scelta, tranne Plain:
Funziona per i siti WordPress locali e pubblici e offre endpoint per post, pagine, commenti, media, ecc.
http://yoursite.com/wp-json/wp/v2/posts
http://yoursite.com/wp-json/wp/v2/comments
http://yoursite.com/wp-json/wp/v2/mediaMa la REST API permette di fare molto altro. Abbiamo una guida completa al riguardo.
WPGraphQL in combinazione con WordPress Headless
Nel 2012 Facebook ha introdotto GraphQL, introducendo un approccio rivoluzionario al recupero dei dati tramite API. La natura dichiarativa e l’acquisizione selettiva dei dati rappresentavano una solida alternativa alle tradizionali API REST.
Nel 2015, Jason Bahl si è reso conto della necessità di una soluzione che combinasse la flessibilità di GraphQL con le funzionalità di WordPress ed ha rilasciato WPGraphQL, una soluzione che ha cambiato le carte in tavola per gli sviluppatori di WordPress.
WPGraphQL è un plugin basato su GraphQL con un approccio più efficiente e personalizzato al recupero dei dati di WordPress. Presenta un unico endpoint, permettendo un recupero preciso dei dati e riducendo i problemi di over-fetching tipici delle API REST.
Come usare WPGraphQL
Per utilizzare WPGraphQL, vanno seguiti questi passaggi:
- Installare il plugin WPGraphQL: iniziamo installando il plugin WPGraphQL sul nostro sito WordPress. Possiamo farlo attraverso la dashboard di WordPress o scaricandolo dal repository ufficiale dei plugin di WordPress.
Il plugin WpGraphQL nella directory dei plugin di WP. - Provare il playground GraphQL: una volta installato, WPGraphQL offre un GraphQL Playground integrato. Per accedervi, apriamo la scheda GraphQL nella bacheca di WordPress:
IDE GraphQL in WordPress. Il playground permette di esplorare lo schema, eseguire query e testare interattivamente le mutazioni.
- Creare le query: sfruttiamo la potenza di GraphQL creando query su misura per le nostre specifiche esigenze di recupero dati. Usiamo lo schema documentato automaticamente per comprendere i dati e le relazioni disponibili.
Il recupero dei dati dei post di WordPress con WPGraphQL.
Ora possiamo integrare WPGraphQL nell’applicazione frontend, sia essa realizzata con React, Vue o qualsiasi altro framework. Per recuperare i dati in modo efficiente e aggiornare l’interfaccia utente in modo dinamico, utilizzeremo un singolo endpoint GraphQL.
Principali caratteristiche di WPGraphQL
WPGraphQL presenta notevoli caratteristiche che permettono di recuperare i dati in maniera ottimizzata e mirata.
Singolo endpoint per recuperare i dati in modo preciso
WPGraphQL fornisce un endpoint unico, tipicamente /graphql, che permette di recuperare dati specifici in modo efficiente. Questo contrasta con le API REST, per le quali sono necessari più endpoint per recuperare le stesse informazioni.
Per quanto riguarda l’API REST, supponiamo di voler recuperare i dati di un post e dei suoi commenti. Dovremo effettuare più richieste a diversi endpoint, ad esempio:
Per ottenere informazioni su un post:
http://yoursite.com/wp-json/wp/v2/posts/123Per ottenere i commenti relativi al post:
http://yoursite.com/wp-json/wp/v2/comments?post=123D’altra parte, con WPGraphQL possiamo ottenere lo stesso risultato con una singola query mirata:
{
post(id: "123") {
title
content
comments {
edges {
node {
content
}
}
}
}
}In questo esempio, la query GraphQL viene inviata a un singolo endpoint. La query stabilisce che vogliamo informazioni sul post con ID “123”, e che la risposta dovrà riportare il titolo, il contenuto e i commenti associati. WPGraphQL elabora la query e restituisce un’unica risposta contenente esattamente i dati richiesti.
Query mirate per un recupero dati efficiente
Con GraphQL possiamo creare query specifiche in base alle nostre esigenze. Questo ci permette di richiedere solo i dati necessari, riducendo al minimo l’over-fetching.
Supponiamo di voler recuperare alcuni dati (titolo, autore e data) su tutti i post. L’API REST non è in grado di farlo. Per recuperare questi dati, dovremo utilizzare un endpoint come questo:
http://yoursite.com/wp-json/wp/v2/postsQuesto endpoint recupera l’intero set di dati per tutti i post, compresi i contenuti, le categorie e i dati associati. Con WPGraphQL possiamo creare una query mirata per recuperare solo i dati che ci occorrono:
{
posts {
title
date
author {
name
}
}
}In questo esempio, la query GraphQL è progettata per recuperare i dati dei post. Ma noi chiediamo solo il titolo, la data e il nome dell’autore. WPGraphQL permette di richiedere solo i campi che ci interessano, ottenendo una risposta più efficiente e leggera.
Risorse root multiple
Con WPGraphQL possiamo interrogare più risorse root in un’unica richiesta:
{
posts {
edges {
node {
title
content
}
}
}
pages {
edges {
node {
title
content
}
}
}
}Scegliere l’head ideale per WordPress Headless
Quando si decide per una soluzione WordPress Headless, una delle decisioni cruciali da prendere riguarda l’head ideale, ossia la tecnologia di frontend che genererà l’interfaccia utente e determinerà l’esperienza dell’utente.
Questa decisione ha un’importanza enorme perché ha un impatto diretto sulle prestazioni, sulla scalabilità e sulla manutenibilità dell’applicazione web. Diversi framework frontend sono compatibili con WordPress Headless, ognuno con i suoi punti di forza e le sue considerazioni.
Ad esempio, possiamo scegliere un generatore di siti statici (SSG) e distribuirlo gratuitamente sull’Hosting di Siti Statici di Kinsta, in modo da preoccuparci solo dell’Hosting di WordPress (il backend) e sfruttare l’hosting gratuito per l’head (il frontend).
Allo stesso modo, possiamo anche adottare un approccio più solido, ad esempio utilizzando una libreria JavaScript come React per il frontend e mantenere WordPress per il backend.
Riepilogo
Sia WPGraphQL che l’API REST permettono di recuperare dati da un CMS WordPress Headless e integrarli perfettamente nelle applicazioni frontend. La scelta tra i due dipende dalle esigenze specifiche del progetto e dall’approccio che si preferisce per il recupero dei dati.
Scegliendo l’API REST, si avrà accesso a una soluzione integrata in WordPress che permetterà di recuperare facilmente i dati in formato JSON. D’altra parte, WPGraphQL offre un approccio più moderno ed efficiente, sfruttando la potenza di GraphQL.
Con la crescente diffusione delle soluzioni headless, gli sviluppatori possono scegliere lo strumento che meglio si allinea con il loro flusso di lavoro e con gli obiettivi del progetto, per un’integrazione perfetta ed efficiente tra WordPress e il framework frontend scelto.
Su Kinsta, creare e gestire un backend WordPress è un gioco da ragazzi, grazie al nostro Hosting WordPress specializzato. Il nostro Hosting WordPress dispone di funzioni preziose, tra cui l’edge caching, il backup del sito, i certificati SSL Cloudflare gratuiti, il CDN Kinsta e molto altro.
Inoltre, è possibile distribuire il frontend utilizzando il nostro Hosting di Applicazioni o l’Hosting di Siti Statici per SSG. Questo approccio unificato permette di gestire sia il frontend che il backend e di accedervi attraverso un’unica dashboard.
Lascia un commento