WordPress è uno dei sistemi di gestione dei contenuti (CMS) più popolari, utilizzato da 810 milioni di persone, ovvero il 41% dell’intera internet! È la scelta ideale per chi vuole creare velocemente un sito web perché è semplice, intuitivo, offre ampie possibilità di personalizzazione e dispone di un solido ecosistema di plugin e di altre risorse.

Una delle soluzioni per sfruttare al meglio WordPress è la modalità headless.

Un CMS headless, noto anche come sistema headless, è un tipo di CMS backend utilizzato esclusivamente per la gestione dei contenuti. Questo permette di integrare i contenuti in qualsiasi sistema o sito web semplicemente invocando le API del CMS headless.

Tuttavia, in questo modo il frontend va gestito separatamente. È qui che entra in gioco un’API.

Le API permettono a due o più applicazioni di scambiarsi dati. In questo caso, l’API viene utilizzata per trasferire i dati dal CMS al sito di frontend, garantendo così maggiore flessibilità e prestazioni superiori.

In questo articolo scopriremo cos’è un CMS headless, perché utilizzarne uno e come configurarlo per WordPress.

Cosa vuol dire WordPress Headless?

Un sito WordPress Headless è un sito che utilizza WordPress come CMS, o sistema di gestione dei contenuti, e altre tecnologie frontend come React o Vue per il frontend.

Per visualizzare i contenuti del sito, vengono utilizzate librerie e framework JavaScript. Pertanto, un sito WordPress Headless ha un frontend e un backend separati e usa un’API per la comunicazione.

In termini più semplici, in un’architettura headless il CMS viene utilizzato solo per archiviare e gestire i contenuti e non per il frontend del sito web.

Il compito principale del frontend, invece, è quello di visualizzare i contenuti, indipendentemente da dove i contenuti siano archiviati o gestiti, a condizione di poterli raggiungere.

Un sito WordPress Headless ha prestazioni migliori perché le richieste del frontend sono gestite da tecnologie più veloci, come React, e solo il backend è gestito da WordPress. La separazione tra frontend e backend consente di scalare i componenti in modo indipendente.

Vantaggi e svantaggi di WordPress Headless

Come sempre nel mondo dello sviluppo, la scelta di una soluzione WordPress Headless presenta vantaggi e svantaggi. È importante comprenderli entrambi prima di prendere una decisione.

Vantaggi di WordPress Headless

Tra i principali vantaggi di un’implementazione di WordPress Headless ricordiamo i seguenti:

  • Flessibilità: WordPress Headless permette agli sviluppatori di creare esperienze frontend personalizzate senza essere limitati dal tradizionale sistema di temi di WordPress. Ciò significa che è possibile creare interfacce utente ed esperienze uniche per esigenze specifiche.
  • Prestazioni: separare il frontend dal backend di un sito WordPress può rendere più veloce il caricamento del sito e quindi migliorarne le prestazioni, perché il server si limita a fornire i dati tramite un’API, anziché eseguire il rendering dell’HTML ad ogni richiesta.
  • Sicurezza: separando il frontend dal backend, un sistema WordPress Headless può fornire un ulteriore livello di sicurezza in quanto limita l’accesso al codice e al database di WordPress.

Svantaggi di WordPress Headless

Tra gli svantaggi di un sistema WordPress Headless ricordiamo:

  • Mancanza di temi: dato che WordPress Headless non ha una base di temi precostituiti, è necessario creare i propri temi. Questo può richiedere tempo e risorse.
  • Costi: lo sviluppo di un sito WordPress Headless può essere più costoso di un sito WordPress tradizionale, in quanto richiede maggiori competenze tecniche e risorse per la configurazione e la manutenzione.
  • Limitazioni dei plugin: alcuni plugin di WordPress potrebbero non funzionare con WordPress Headless, in quanto per funzionare correttamente si basano sui temi di WordPress.

Cos’è l’API REST di WordPress?

L’API REST di WordPress è utilizzata come interfaccia tra il backend e il frontend. Grazie all’API, i dati possono essere facilmente inviati o recuperati dal sito, perché l’API ha un accesso controllato ai dati. Inoltre, garantisce che solo gli utenti autorizzati possano accedervi.

L’API può supportare un’ampia gamma di formati di dati, tra cui JSON, il che facilita l’interazione con il sistema.

L’API REST di WordPress è un potente strumento per gli sviluppatori che possono creare, aggiornare o cancellare dati, oltre a creare funzionalità personalizzate per i siti o integrarsi con altri servizi. Inoltre, sono disponibili dei plugin che estendono le funzionalità dell’API, come ad esempio l’integrazione di ulteriori metodi di autenticazione.

Cos’è React?

React è una libreria JavaScript che permette di creare interfacce utente. Si tratta di una libreria frontend open-source e riutilizzabile. Gli sviluppatori possono utilizzarla per creare componenti dell’interfaccia utente (UI) utilizzando una sintassi dichiarativa.

React crea un’interfaccia utente interattiva e renderizza i componenti quando i dati cambiano. Questa libreria è molto popolare tra gli sviluppatori che vogliono creare componenti complessi e riutilizzabili, gestire lo stato in modo efficiente e aggiornare facilmente l’interfaccia utente in tempo reale.

La solida community di sviluppatori di React ha creato numerosi strumenti, librerie e risorse per migliorare le funzionalità della libreria. Molte aziende e organizzazioni stanno adottando React come tecnologia per la creazione di applicazioni web complesse, dinamiche e veloci.

Collage di loghi di aziende (tra cui Facebook, Netflix, Amazon, Reddit) con React
Aziende che utilizzano React.js (fonte: inexture.com)

Perché utilizzare React?

React offre molti vantaggi che ne fanno una soluzione eccellente per sviluppare applicazioni web complesse e dinamiche.

Eccone alcuni:

  • Sintassi dichiarativa: React adotta un approccio dichiarativo alla costruzione dei componenti dell’interfaccia utente, il che rende più semplice la creazione di componenti riutilizzabili e altamente efficienti.
  • Ecosistema esteso e comunità attiva: React vanta una comunità di sviluppatori ampia e attiva, che ha portato alla creazione di una vasta gamma di strumenti e librerie che ne migliorano le funzionalità.
  • DOM virtuale: React utilizza il DOM virtuale per aggiornare l’interfaccia utente in tempo reale. Ciò significa che quando lo stato cambia, vengono aggiornati solo i componenti necessari e non viene invece renderizzata l’intera pagina.
  • Riutilizzabilità: React.js offre componenti riutilizzabili che possono essere impiegati in diverse applicazioni, riducendo notevolmente i tempi e il lavoro di sviluppo.

Come creare un sito WordPress Headless con React

È il momento di sporcarci le mani e imparare a creare e distribuire un sito WordPress Headless con React.

Prerequisiti

Ecco cosa è necessario:

Passo 1. Installare un sito WordPress

Iniziamo a configurare il sito WordPress che servirà come fonte di dati per l’applicazione React. Se avete già configurato un sito WordPress, potete saltare questa sezione; in caso contrario, seguiteci.

In questo tutorial utilizzeremo DevKinsta, un ambiente di sviluppo locale veloce e affidabile utilizzato per creare, sviluppare e distribuire siti WordPress. È completamente gratuito: basta scaricarlo dal sito ufficiale e installarlo sul sistema.

Una volta completata l’installazione, aprite la dashboard di DevKinsta e cliccate su Nuovo sito WordPress.

Inserite i dati richiesti e premete il pulsante Crea sito.

Schermata della pagina di creazione del sito di DevKinsta che mostra tre campi di input e un pulsante
Pagina di creazione del sito in DevKinsta

Questa operazione potrebbe richiedere qualche minuto, ma una volta creato il sito, potrete accedere al pannello di amministrazione cliccando rispettivamente su Apri sito o WP Admin.

Successivamente, per abilitare l’API JSON, dovrete aggiornare i permalink del vostro sito.

Nella bacheca di WordPress, cliccate su Impostazioni e poi su Permalink. Scegliete l’opzione Nome del post e cliccate su Salva modifiche.

Schermata della pagina delle impostazioni dei permalink del pannello di amministrazione di WordPress che mostra varie opzioni per personalizzare la struttura dei permalink del sito web..
Impostazioni dei Permalink di WordPress

Potete anche utilizzare strumenti come Postman per testare e inviare facilmente richieste alle API REST di WordPress.

Passo 2: configurare un’applicazione React

Ora che abbiamo installato il nostro sito WordPress, possiamo iniziare a lavorare sul frontend. Come già detto, in questo tutorial utilizzeremo React per il frontend della nostra applicazione.

Per iniziare, eseguite il codice qui sotto nel terminale per creare un’applicazione React.

npm create vite@latest my-blog-app 
cd my-blog-app 
npm install

Questi comandi creeranno un’applicazione React e installeranno le dipendenze necessarie.

Dobbiamo anche installare Axios, una libreria JavaScript che consente di effettuare richieste HTTP. Per l’installazione, eseguite questo comando:

npm install axios

Ora, per avviare il server di sviluppo, potete eseguire npm run dev nel terminale. Il server dovrebbe inizializzare l’applicazione all’indirizzo http://127.0.0.1:5173.

La schermata della pagina predefinita di React mostra il logo di React e Vite, un pulsante e del testo.
Landing page Vite + React

Poi aprite il progetto nel vostro editor di codice preferito e cancellate tutti i file non necessari, come la cartella assets, index.css e app.css.

Potete anche sostituire il codice all’interno di main.jsx e App.jsx con il seguente codice:

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
// App.jsx

import React from 'react'

export default function App() {
  return (
    <App />
  )
}

Passo 3: recuperare i post da WordPress

Ora è il momento di recuperare i post dal nostro sito WordPress.

All’interno di App.jsx, aggiungete il seguente stato e importate useState da React:

const [posts, setPosts] = useState([])

useState è un hook integrato in React che viene utilizzato per aggiungere stati a un componente, uno stato che si riferisce a dati o proprietà.

posts è utilizzato per ottenere i dati dallo stato e setPosts è utilizzato per aggiungere nuovi dati al post. Di default, abbiamo passato allo stato un array vuoto.

Quindi aggiungete il seguente codice dopo lo stato per recuperare i post dall’API REST di WordPress:

const fetchPosts = () => {
    // Using axios to fetch the posts
    axios
      .get("http://headless-wordpress-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        // Saving the data to state
        setPosts(res.data);
      });
  }


  // Calling the function on page load
  useEffect(() => {
    fetchPosts()
  }, [])

Il codice precedente esegue la funzione fetchPosts() al caricamento della pagina. All’interno della funzione fetchPosts(), inviamo una richiesta GET all’API di WordPress utilizzando Axios per recuperare i post e poi salvarli nello stato dichiarato in precedenza.

Passo 4: creare un componente Blog

All’interno della cartella principale, create una nuova cartella denominata components e al suo interno create due nuovi file: blog.jsx e blog.css.

Per prima cosa, aggiungete il seguente codice a blog.jsx:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";

export default function Blog({ post }) {
  const [featuredImage, setFeaturedimage] = useState();

  const getImage = () => {
    axios
     .get(post?._links["wp:featuredmedia"][0]?.href)
     .then((response) => {
      setFeaturedimage(response.data.source_url);
    });
  };

  useEffect(() => {
    getImage();
  }, []);

  return (
    <div class="container">
      <div class="blog-container">
        <p className="blog-date">
          {new Date(Date.now()).toLocaleDateString("en-US", {
            day: "numeric",
            month: "long",
            year: "numeric",
          })}
        </p>
        <h2 className="blog-title">{post.title.rendered}</h2>
        <p
          className="blog-excerpt"
          dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
        />
        <img src={featuredImage} class="mask" />
      </div>
    </div>
  );
}

Nel codice precedente, abbiamo creato un componente che accetta la proprietà posts contenente le informazioni sul post del blog dall’API di WordPress.

Nella funzione getImage(), utilizziamo Axios per recuperare l’URL dell’immagine in evidenza e poi salviamo queste informazioni nello stato.

Abbiamo poi aggiunto un hook useEffect per invocare la funzione getImage() una volta che il componente è stato montato. Abbiamo anche aggiunto la dichiarazione di ritorno in cui renderizziamo i dati del post, il titolo, l’estratto e l’immagine.

Aggiungete, quindi, gli stili sottostanti al file blog.css:

@import url("https://fonts.googleapis.com/css?family=Poppins");

.blog-container {
  width: 400px;
  height: 322px;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 20px 50px #d9dbdf;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

img {
  width: 400px;
  height: 210px;
  object-fit: cover;
  overflow: hidden;
  z-index: 999;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.blog-title {
  margin: auto;
  text-align: left;
  padding-left: 22px;
  font-family: "Poppins";
  font-size: 22px;
}

.blog-date {
  text-align: justify;
  padding-left: 22px;
  padding-right: 22px;
  font-family: "Poppins";
  font-size: 12px;
  color: #c8c8c8;
  line-height: 18px;
  padding-top: 10px;
}

.blog-excerpt {
  text-align: justify;
  padding-left: 22px;
  padding-right: 22px;
  font-family: "Poppins";
  font-size: 12px;
  color: #8a8a8a;
  line-height: 18px;
  margin-bottom: 13px;
}

Nel file App.jsx, aggiungete il seguente codice nell’istruzione return per rendere il componente blog:

<div>
	{posts.map((item) => (
		<Blog post={item} />
	))}
</div>;

Infine, ecco il vostro App.jsx:

import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';

export default function App() {
  const [posts, setPosts] = useState([]);

  const fetchPosts = () => {
    axios
      .get("http://my-awesome-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        setPosts(res.data);
      });
  }

  useEffect(() => {
    fetchPosts()
  }, [])

  return (
    <div>
      {posts.map((item) => (
        <Blog
          post={item}
        />
      ))}
    </div>
  )
}

Salvate il file e aggiornate la scheda del browser. Ora dovreste essere in grado di visualizzare sulla pagina gli articoli del blog.

Schermata dell'applicazione React con quattro schede blog, ognuna delle quali visualizza un diverso post di WordPress.
WordPress Headless con React.js

Riepilogo

WordPress Headless è un’ottima soluzione per creare siti veloci e dall’architettura scalabile. Grazie a React e all’API REST di WordPress, creare siti web dinamici e interattivi con WordPress come sistema di gestione dei contenuti è davvero semplice.

Altrettanto importante per la velocità è il posto dove viene ospitato il sito WordPress. Kinsta è in grado di offrire hosting WordPress velocissimo grazie alle macchine C2 di altissimo livello sulla rete Premium Tier di Google, oltre all’integrazione di Cloudflare, che permette di evitare che il sito vada incontro a perdite di dati o attacchi malevoli.

Avete realizzato o avete intenzione di realizzare un sito WordPress Headless con React? Fatecelo sapere nella sezione dei commenti qui sotto!

Suhail Kakar

Suhail è uno sviluppatore di software specializzato nello sviluppo di applicazioni web e mobili full-stack. Collabora attivamente a progetti open-source e si diverte a costruire applicazioni Web3.