Gatsby <3 WordPress

Använd WordPress REST API för att enkelt generera statiska sidor i React, med hjälp av Gatsby.

Tråkigt uttryckt är Gatsby en generator (eller mjukvara) som genererar statiska sidor baserat på React. Men man skulle också kunna beskrivas det som ett snabbt och modernt front end-ramverk som kan kombineras med större publiceringssystem, till exempel WordPress. Gatsby väver samman bland annat React, Webpack och GraphQL på ett smidigt sätt.

För att komplettera en Gatsby-installation så finns det tillägg som kan användas, där bland ett för att hämta ut data från WordPress. I och med att WordPress har sitt välutvecklade REST API är det perfekt att använda som back-end.

WordPress REST API

Kort förklarat så gör WordPress REST API det möjligt för utvecklare att interagera med sajter genom att skicka och ta emot JSON-objekt (JavaScript Object Notation), vilket är datan som visas ut när till exempel nedanstående URL:er skrivs in i webbläsaren. 

GraphQL

Gatsby använder GraphQL, ett frågespråk skapat av Facebook, som enkelt kan hämta data från WordPress egna API. Alla entiteter, som till exempel poster, sidor, taxonomier, metadata, posttyper och media, kan enkelt laddas in. GraphQL gör det enkelt att definiera vilken data som ska hämtas från servern, vilket i sin tur förhindrar att allt för stora mängder data returneras.

Det finns dessutom stöd för att hämta ut data från WordPress-tillägget Advanced Custom Fields, vilket är en stor fördel då det är ett tillägg som används på många WordPress-sajter. Utöver det så finns stöd för tillägg som Yoast och WPML.

Data kan hämtas både från egeninstallerade WordPress-sajter och från sajter som ligger på WordPress.com. 

Snabba React

Så varför skulle man välja att skriva ut front end i React istället för att använda ett vanligt tema direkt på WordPress? Svaret är enkelt: Det kan gå betydligt snabbare att ladda in dina sidor med React och Gatsby, speciellt om du har ett lite mindre kraftigt webbhotell. Om det finns många aktiverade tillägg på en WordPress-sajt bidrar det ofta att laddningstiden för sidor blir långsammare, speciellt om stora tillägg som till exempel WooCommerce används.

Gatsby har, precis som WordPress, teman som går att aktivera på sajten. Men du kan såklart välja att bygga egna och styla din hämtade data precis som du vill. 

Gatsby växer och nya tillägg och teman tillkommer hela tiden. Det finns en blogg, en bra dokumentation och tutorials. Du hittar Gatsby här och dess WordPress-tillägg hittar du här.

Created with Sketch. Scrolla för mer läsning