Astro: creare un sito WordPress headless

In questa nuova parte della guida vedremo come creare un sito WordPress headless con Astro. Il codice che illustreremo è disponibile su GitHub.

Requisiti per il progetto e installazione di Astro

Questi sono i requisiti da verificare:

• Node.js versione 18.14.1 o superiore
• Un editor di codice. Consigliamo Visual Studio Code.
• Un terminale dei comandi.

Una volta verificati i requisiti, si passa all'installazione di Astro:

npm create astro@latest

All'avvio dell'installazione, possiamo specificare la directory del progetto. Se siamo già nella directory dei nostri progetti, basterà digitare un nome e Astro creerà automaticamente la directory. Nel nostro caso la chiameremo wp-astro.

Una volta assegnato il nome al progetto, ci viene chiesto se includere i file di esempio, utilizzare il template del blog, oppure partire con un progetto vuoto. Trattandosi di un sito WordPress, scegliamo di installare il template del blog, che ci fornirà una struttura pronta per l'uso e parte del codice di cui avremo bisogno.

Estensioni per Visual Studio Code

Conclusa l'installazione, interrompiamo per il momento l'esecuzione del server con Ctrl + C e apriamo Visual Studio Code o un altro editor di codice. Se lavoriamo con VS Code, potremo utilizzare alcune estensioni che ci aiuteranno durante lo sviluppo. Possiamo installare le estensioni cercandole nel campo di ricerca della scheda "Extensions". Cominciamo con l'estensione per Astro.

Installiamo anche le estensioni Astro Snippets, che fornisce una serie di snippet per Astro, e Houston, sempre del team di Astro.

Un'altra estensione di Visual Studio Code utile per questa applicazione è Postman, che permette di testare le risposte dell'API direttamente nell'editor.

Apertura del progetto

Ora che abbiamo tutto il necessario, apriamo il progetto in Visual Studio Code. Dal menu "Terminale" lanciamo un nuovo terminale dei comandi, assicuriamoci di essere nella directory del progetto e avviamo il server:

npm run dev

Con il server in esecuzione, la home del progetto sarà disponibile da localhost, sulla porta 4321. Digitiamo quindi http://localhost:4321/ nel nostro browser e diamo un'occhiata al sito su cui lavoreremo.

Il progetto è in esecuzione. Prima di passare all'installazione di WordPress, vediamo come importare dati esterni in un'applicazione Astro.

Accedere ai dati con Astro

Astro supporta nativamente l'operatore await al livello superiore di un modulo (top-level await), senza ricorrere alla funzione async. Questo permette di utilizzare await insieme alla Fetch API per richiedere dati ad una fonte esterna in modo semplice e diretto.

Nella configurazione predefinita di Astro (SSG), le chiamate fetch vengono eseguite al tempo della build (modalità statica). Se si abilita il server-side rendering, le chiamate vengono eseguite al momento della richiesta. Optare per l'una o per l'altra modalità dipende dal tipo di progetto e dalla frequenza di aggiornamento dei contenuti esterni.

Gli esempi di questa guida sono basati sulla modalità statica. Per maggiori informazioni sul server site rendering, si legga la documentazione di Astro. Nell'esempio che segue, richiediamo una serie di dati ad una fonte esterna:

---
const response = await fetch('https://swapi.dev/api/planets');
const data = await response.json();
const planets = data.results;
---
<h1>I pianeti di Guerre Stellari</h1>
<ul>
  {planets.map(({name}) => (
    <li>{name}</li>
  ))}
</ul>

Riportiamo questo codice in un file src/pages/planets.astro, avviamo il server e digitiamo nella barra degli indirizzi del browser l'URL http://localhost:4321/planets. Vedremo l'elenco dei pianeti della saga di Star Wars.

Ora che sappiamo come accedere ai dati con Astro, passiamo all'installazione WordPress da cui prelevarli.

WordPress e la Rest API

Astro si presta ottimamente alla realizzazione del frontend di un'installazione WordPress headless. Sarà solo necessario che il sito esponga i contenuti tramite la Rest API, cosa che ora è di default su tutte le installazioni di WordPress.

Per approfondire i concetti base dei CMS headless e della Rest API di WordPress, rinviamo alle seguenti risorse:

• CMS headless. Cosa sono e quando utilizzarli
• La REST API di WordPress: introduzione
• La Rest API di WordPress: composizione di una richiesta

Per gli esempi di questa guida, invieremo le nostre richieste alla Rest API del WordPress developer blog. Si tenga presente che per progetti più complessi potrebbe essere più efficiente utilizzare GraphQL, che permette di recuperare esclusivamente i dati di cui si ha bisogno.

La richiesta che invieremo alla Rest API è la seguente:

https://developer.wordpress.org/news/wp-json/wp/v2/posts
?per_page=21
&_fields=id,slug,date,title,excerpt,content,link,_links
&_embed=author,wp:featuredmedia,wp:term

Il parametro _fields stabilisce i campi che saranno compresi nella risposta. Avremo l'id del post, lo slug, la data (date), il titolo (title), il riassunto (excerpt), il contenuto (content), il link all'articolo e i _link alle risorse correlate. Qui abbiamo impostato anche il parametro facoltativo per_page, per ottenere un numero preciso di articoli. Se omesso, l'API restituisce un numero massimo di 10 articoli.

Il parametro _embed stabilisce che la risposta deve includere le risorse incorporate. In questo caso, saranno parte della risposta l'immagine di anteprima (wp:featuredmedia) e le tassonomie (wp:term).

Ora sappiamo come recuperare dati esterni in Astro e abbiamo l'URL della Rest API del sito WordPress. Nel prossimo capitolo cominceremo a scrivere il codice dell'applicazione.