Cos’\u00e8 un CMS headless?<\/h2>\n
Un CMS headless \u00e8 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<\/a>) che consente agli sviluppatori<\/a> di recuperare e distribuire i contenuti su qualsiasi dispositivo o piattaforma.<\/p>\n Oggi esistono numerose piattaforme CMS headless. Tuttavia, il passaggio dei contenuti da WordPress pu\u00f2 sembrare inutile. Ma esiste un’alternativa: WordPress Headless.<\/p>\n WordPress<\/a>, nella sua forma tradizionale, non \u00e8 intrinsecamente un CMS Headless. \u00c8 un CMS potente, noto per la facilit\u00e0 d’uso e la flessibilit\u00e0 nella creazione e nella gestione dei contenuti. Tuttavia, tradizionalmente combina la gestione dei contenuti e la loro presentazione in un unico sistema.<\/p>\n 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<\/a> e i temi, la presentazione del frontend \u00e8 disabbinata o distaccata dal backend.<\/p>\n Questo permette agli sviluppatori di creare applicazioni utilizzando tecnologie e framework diversi, pur sfruttando le note funzionalit\u00e0 di gestione dei contenuti di WordPress. \u00c8 un modo per far funzionare WordPress in modalit\u00e0 “headless”, anche se non \u00e8 la configurazione predefinita.<\/p>\n 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.<\/p>\n L’API REST \u00e8 un pilastro fondamentale nello sviluppo di WordPress perch\u00e9 permette di recuperare i dati in formato JSON. A partire da WordPress 4.7<\/a>, \u00e8 stata integrata in WordPress e non richiede l’installazione di un plugin.<\/p>\n L’API d\u00e0 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.<\/p>\n Per ottenere i dati di WordPress in formato JSON, aggiungiamo Se l’API JSON non \u00e8 abilitata di default, quando visitiamo il sito Funziona per i siti WordPress locali e pubblici e offre endpoint<\/a> per post<\/a>, pagine<\/a>, commenti<\/a>, media<\/a>, ecc.<\/p>\n Ma la REST API permette di fare molto altro. Abbiamo una guida completa<\/a> al riguardo.<\/p>\n 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.<\/p>\n Nel 2015, Jason Bahl<\/a> si \u00e8 reso conto della necessit\u00e0 di una soluzione che combinasse la flessibilit\u00e0 di GraphQL con le funzionalit\u00e0 di WordPress ed ha rilasciato WPGraphQL<\/a>, una soluzione che ha cambiato le carte in tavola per gli sviluppatori di WordPress.<\/p>\n WPGraphQL \u00e8 un plugin basato su GraphQL con un approccio pi\u00f9 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.<\/p>\n Per utilizzare WPGraphQL, vanno seguiti questi passaggi:<\/p>\n Il playground permette di esplorare lo schema, eseguire query e testare interattivamente le mutazioni.<\/li>\n Ora possiamo integrare WPGraphQL nell’applicazione frontend, sia essa realizzata con React<\/a>, Vue<\/a> o qualsiasi altro framework. Per recuperare i dati in modo efficiente e aggiornare l’interfaccia utente in modo dinamico, utilizzeremo un singolo endpoint GraphQL.<\/p>\n WPGraphQL presenta notevoli caratteristiche che permettono di recuperare i dati in maniera ottimizzata e mirata.<\/p>\n WPGraphQL fornisce un endpoint unico, tipicamente Per quanto riguarda l’API REST, supponiamo di voler recuperare i dati di un post e dei suoi commenti. Dovremo effettuare pi\u00f9 richieste a diversi endpoint, ad esempio:<\/p>\n Per ottenere informazioni su un post:<\/p>\n Per ottenere i commenti relativi al post:<\/p>\n D’altra parte, con WPGraphQL possiamo ottenere lo stesso risultato con una singola query mirata:<\/p>\n 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\u00e0 riportare il titolo, il contenuto e i commenti associati. WPGraphQL elabora la query e restituisce un’unica risposta contenente esattamente i dati richiesti.<\/p>\n 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.<\/p>\n Supponiamo di voler recuperare alcuni dati (titolo, autore e data) su tutti i post. L’API REST non \u00e8 in grado di farlo. Per recuperare questi dati, dovremo utilizzare un endpoint come questo:<\/p>\n Questo 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:<\/p>\n In questo esempio, la query GraphQL \u00e8 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\u00f9 efficiente e leggera.<\/p>\n Con WPGraphQL possiamo interrogare pi\u00f9 risorse root in un’unica richiesta:<\/p>\n 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\u00e0 l’interfaccia utente e determiner\u00e0 l’esperienza dell’utente.<\/p>\n Questa decisione ha un’importanza enorme perch\u00e9 ha un impatto diretto sulle prestazioni, sulla scalabilit\u00e0 e sulla manutenibilit\u00e0 dell’applicazione web. Diversi framework frontend sono compatibili con WordPress Headless, ognuno con i suoi punti di forza e le sue considerazioni.<\/p>\n Ad esempio, possiamo scegliere un generatore di siti statici (SSG)<\/a> e distribuirlo gratuitamente sull’Hosting di Siti Statici di Kinsta<\/a>, in modo da preoccuparci solo dell’Hosting di WordPress<\/a> (il backend) e sfruttare l’hosting gratuito per l’head (il frontend).<\/p>\n Allo stesso modo, possiamo anche adottare un approccio pi\u00f9 solido, ad esempio utilizzando una libreria JavaScript<\/a> come React<\/a> per il frontend e mantenere WordPress per il backend.<\/p>\n 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.<\/p>\n Scegliendo l’API REST, si avr\u00e0 accesso a una soluzione integrata in WordPress che permetter\u00e0 di recuperare facilmente i dati in formato JSON. D’altra parte, WPGraphQL offre un approccio pi\u00f9 moderno ed efficiente, sfruttando la potenza di GraphQL.<\/p>\n 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.<\/p>\n Su Kinsta<\/a>, creare e gestire un backend WordPress \u00e8 un gioco da ragazzi, grazie al nostro Hosting WordPress<\/a> specializzato. Il nostro Hosting WordPress dispone di funzioni preziose, tra cui l’edge caching<\/a>, il backup del sito<\/a>, i certificati SSL Cloudflare gratuiti<\/a>, il CDN Kinsta<\/a> e molto altro.<\/p>\n Inoltre, \u00e8 possibile distribuire il frontend utilizzando il nostro Hosting di Applicazioni<\/a> o l’Hosting di Siti Statici<\/a> per SSG. Questo approccio unificato permette di gestire sia il frontend che il backend e di accedervi attraverso un’unica dashboard<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Oggi, nello sviluppo web, la separazione dei sistemi frontend e backend ha acquisito notevole importanza e i siti headless sono sempre pi\u00f9 popolari. Tradizionalmente, nei sistemi …<\/p>\n","protected":false},"author":287,"featured_media":75483,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26232,26179],"class_list":["post-75482","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-cms-headless"],"yoast_head":"\nWordPress Headless<\/h3>\n
![\"Architettura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/headless-cms-arcitecture.png\")
L’API REST con WordPress Headless<\/h2>\n
\/wp-json<\/code> all’URL del sito WordPress:<\/p>\nhttp:\/\/yoursite.com\/wp-json<\/code><\/pre>\nhttp:\/\/yoursite.com\/wp-json<\/code>, possiamo abilitarla dalla pagina Permalink<\/strong> nelle Impostazioni di WordPress<\/strong> e selezionando Nome del post<\/strong> o qualsiasi altra opzione a nostra scelta, tranne Plain<\/strong>:<\/p>\n![\"Come](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/configure-headless-wp-rest-api.jpg\")
http:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/comments\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/media<\/code><\/pre>\nWPGraphQL in combinazione con WordPress Headless<\/h2>\n
Come usare WPGraphQL<\/h3>\n
\n
![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/wpgraphql-plugin.png\")
![\"IDE](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/graphql-ide-wp.jpg\")
![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/testing-graphql-wp.jpg\")
Principali caratteristiche di WPGraphQL<\/h3>\n
Singolo endpoint per recuperare i dati in modo preciso<\/h4>\n
\/graphql<\/code>, che permette di recuperare dati specifici in modo efficiente. Questo contrasta con le API REST, per le quali sono necessari pi\u00f9 endpoint per recuperare le stesse informazioni.<\/p>\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\/123<\/code><\/pre>\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/comments?post=123<\/code><\/pre>\n{\n post(id: \"123\") {\n title\n content\n comments {\n edges {\n node {\n content\n }\n }\n }\n }\n}<\/code><\/pre>\nQuery mirate per un recupero dati efficiente<\/h4>\n
http:\/\/yoursite.com\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n{\n posts {\n title\n date\n author {\n name\n }\n }\n}<\/code><\/pre>\nRisorse root multiple<\/h4>\n
{\n posts {\n edges {\n node {\n title\n content\n }\n }\n }\n\n pages {\n edges {\n node {\n title\n content\n }\n }\n }\n}<\/code><\/pre>\nScegliere l’head ideale per WordPress Headless<\/h2>\n
Riepilogo<\/h2>\n