WordPress är ett av de mest populära innehållshanteringssystemen (CMS) och används av 810 miljoner –  41 % av hela internet! Det är det självklara valet för alla som snabbt vill bygga en webbplats. Plattformen är exempelvis enkel, användarvänlig, erbjuder en mängd olika anpassningsalternativ och har dessutom ett starkt ekosystem av plugins och andra resurser.

Ett sätt att få ut så mycket som möjligt av WordPress är att köra huvudlöst.

Ett huvudlöst CMS, även känt som ett huvudlöst system, är en typ av backend-CMS som enbart används för att hantera innehåll. Detta hjälper dig exempelvis att integrera innehåll i vilket system eller vilken webbplats som helst genom att bara anropa API: erna i det huvudlösa CMS: et.

Det innebär dock att frontend måste hanteras separat. Det är här som ett API kommer in i bilden.

API: er gör det möjligt för två eller flera olika applikationer att utbyta data. I det här fallet används API för att överföra data från CMS till en frontend-webbplats. Som ett resultat skapas en större flexibilitet och en snabbare prestanda.

I den här artikeln kommer vi att utforska vad ett huvudlöst CMS är, varför du kanske bör bygga ett sådant och hur du konfigurerar ett för WordPress.

Vad är huvudlöst WordPress?

En huvudlös WordPress-webbplats är en typ av webbplats som huvudsakligen använder WordPress som ett CMS, eller innehållshanteringssystem. Det använder andra frontend-tekniker som React eller Vue för frontend.

JavaScript-biblioteken och ramverken används för att visa webbplatsens innehåll. Därför har ett huvudlöst WordPress en separat frontend och backend, och ett API används för kommunikation.

Enkelt uttryckt innebär en huvudlös arkitektur att CMS: et endast används för att lagra och hantera ditt innehåll. Det bryr sig därför inte om webbplatsens frontend.

Huvuduppgiften för frontend är däremot att visa innehållet. Den bryr sig inte om var innehållet lagras eller hanteras, så länge som den kan nå det.

Ett huvudlöst WordPress har bättre prestanda eftersom frontend-förfrågningarna hanteras av snabbare tekniker som React. Det är därför endast backend som hanteras av WordPress. Separationen av frontend och backend gör det möjligt att skala komponenterna oberoende av varandra.

För- och nackdelar med Huvudlöst WordPress

Som med alla utvecklingsalternativ finns det både fördelar och nackdelar med att välja en huvudlös WordPress-lösning. Det är därför viktigt att förstå båda innan man fattar ett beslut.

Fördelar med huvudlöst WordPress

Några av de viktigaste fördelarna med en huvudlös WordPress-implementering är exempelvis följande:

  • Flexibilitet: Huvudlöst WordPress låter utvecklare skapa anpassade frontend-upplevelser utan att begränsas av det traditionella WordPress-temasystemet. Som ett resultat kan du skapa unika användargränssnitt och upplevelser för specifika behov.
  • Prestanda: Att separera frontend från backend på en WordPress-webbplats kan göra att din webbplats laddas snabbare och ökar sin prestanda. Detta beror på att servern endast levererar data via ett API, snarare än att även rendera HTML för varje förfrågan.
  • Säkerhet: Genom att separera frontend och backend kan huvudlöst WordPress skapa ett extra lager av säkerhet. Det begränsar exempelvis åtkomsten till den underliggande WordPress-kodbasen och databasen.

Nackdelar med huvudlöst WordPress

Nackdelarna med huvudlöst WordPress kan inkludera:

  • Brist på teman: Eftersom huvudlöst WordPress inte förlitar sig på förbyggda teman måste du skapa dina egna anpassade teman. Detta kan vara tidskrävande och kan kräva ytterligare resurser.
  • Kostnad: Att utveckla en huvudlös WordPress-webbplats kan vara dyrare än en traditionell WordPress-webbplats. Det kräver exempelvis mer teknisk expertis och resurser för konfigurering och underhåll.
  • Plugin-begränsningar: Vissa WordPress-plugins kanske inte fungerar med huvudlöst WordPress, eftersom de är beroende av WordPress-teman för att fungera korrekt.

Vad är WordPress REST API?

WordPress REST API används som ett gränssnitt mellan backend och frontend. Med API: et kan data enkelt skickas eller hämtas från webbplatsen. API: et har nämligen en kontrollerad åtkomst till webbplatsens data. Det säkerställer dessutom att endast behöriga användare kan interagera med det.

API: et har stöd för ett stort antal dataformat, inklusive JSON. Som ett resultat är det enkelt att interagera med systemet.

WordPress REST API är ett kraftfullt verktyg som gör att utvecklare kan skapa, uppdatera eller ta bort data.  De kan dessutom skapa en anpassad funktionalitet för webbplatser eller integrera med en annan tjänst. Dessutom finns det tillgängliga plugins som utökar API-funktionaliteten, exempelvis genom att integrera ytterligare autentiserings-metoder.

Vad är React?

React är ett JavaScript-bibliotek för att bygga användargränssnitt. Det är ett återanvändbart komponentbaserat frontend-bibliotek med öppen källkod. Som ett resultat blir det möjligt för utvecklare att bygga användargränssnitts-komponenter (UI) med hjälp av deklarativ syntax.

React skapar ett interaktivt användargränssnitt och renderar komponenterna när data ändras. Biblioteket är exempelvis mycket populärt bland utvecklare som vill skapa komplexa, återanvändbara komponenter. Det går även att hantera tillstånd på ett effektivt sätt och enkelt uppdatera användargränssnittet i realtid.

Reacts starka utvecklar-community har skapat en uppsättning verktyg, bibliotek och resurser för att förbättra bibliotekets funktionalitet. Många organisationer och företag använder React som teknik för att bygga komplexa, dynamiska och snabbverkande webbapplikationer.

Populära företag som använder React.js (källa: inexture.com)
Populära företag som använder React.js (källa: inexture.com)

Varför ska man använda React?

React erbjuder många fördelar som gör det till ett utmärkt val för att utveckla komplexa och dynamiska webbapplikationer.

Här är några av de viktigaste fördelarna med att använda React:

  • Deklarativ syntax: React använder en deklarativ metod för att bygga UI-komponenter. Som ett resultat blir det enkelt att skapa återanvändbara och mycket effektiva komponenter.
  • Stort community och ekosystem: React har ett stort och aktivt community av utvecklare. Det har därför skapats ett brett utbud av verktyg och bibliotek för att förbättra dess funktionalitet.
  • Virtuell DOM: React använder virtuell DOM för att uppdatera användargränssnittet i realtid. Det innebär att när tillståndet ändras uppdateras endast de komponenter som behöver ändras. Annars skulle hela sidan behöva renderas på nytt.
  • Återanvändbarhet: React.js erbjuder återanvändbara komponenter som kan användas i olika applikationer. Som ett resultat minskar utvecklingstiden och ansträngningen avsevärt.

Så här skapar du en huvudlös WordPress-webbplats med React

Nu är det dags att sätta igång och lära oss hur man skapar och distribuerar en huvudlös WordPress-webbplats med React.

Fortsätt läsa för att lära dig mer.

Förkunskaper

Innan du börjar med den här handledningen, se till att du har:

Steg 1. Konfigurera en WordPress-webbplats

Låt oss börja med att konfigurera WordPress-webbplatsen. Den kommer sedan att fungera som datakälla för React-applikationen. Om du redan har konfigurerat en WordPress-webbplats kan du hoppa över det här avsnittet, annars är det bara att följa med.

I den här handledningen kommer vi att använda DevKinsta. Det är en allmänt använd snabb och pålitlig lokal utvecklingsmiljö för att skapa, utveckla och distribuera WordPress-webbplatser. DevKinsta är helt kostnadsfritt att använda – ladda bara ner det från den officiella webbplatsen och installera det på ditt system.

När installationen är klar öppnar du sedan DevKinsta-panelen och klickar på Ny WordPress-webbplats för att skapa en ny WordPress-webbplats.

Fyll i de nödvändiga inmatningarna och tryck på knappen Skapa webbplats för att fortsätta.

DevKinsta's sida för skapande av webbplats
DevKinsta’s sida för skapande av webbplats

Detta kan ta några minuter. När din webbplats har skapats kan du dock komma åt den och dess adminpanel genom att klicka på Öppna webbplats eller WP Admin-alternativ.

För att aktivera JSON API måste du uppdatera perma-länkarna på din webbplats.

I WordPress adminpanel klickar du på Inställningar, följt av Permalänkar. Välj sedan alternativet Inläggsnamn och klicka på Spara ändringar.

WordPress-inställningar för permalänkar
WordPress-inställningar för permalänkar

Du kan dessutom använda verktyg som Postman för att enkelt testa och skicka förfrågningar till WordPress REST API: er.

Steg 2: Konfigurera en React-applikation

Nu när vi har konfigurerat vår WordPress-webbplats kan vi börja att arbeta på frontend. Som vi nämnde ovan kommer denna handledning att använda React för vår applikations frontend.

För att komma igång kör du nedanstående kod i din terminal för att skapa en React-applikation.

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

Kommandona ovan skapar sedan en React-applikation och installerar de nödvändiga beroendena.

Vi behöver dessutom installera Axios, ett JavaScript-bibliotek för att göra HTTP-förfrågningar. Kör kommandot nedan för att installera detta.

npm install axios

För att starta utvecklingsservern kan du nu köra npm run dev i terminalen. Servern bör därefter initiera din app på http://127.0.0.1:5173.

Målsida för Vite + React
Målsida för Vite + React

Öppna sedan ditt projekt i din favoritkodredigerare och ta bort alla onödiga filer som du inte behöver. Det kan exempelvis handla om mappen assets, index.css och app.css.

Du kan dessutom ersätta koden i main.jsx och App.jsx med följande kod:

// 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 />
  )
}

Steg 3: Hämta inlägg från WordPress

Nu är det dags att hämta inläggen från vår WordPress-webbplats.

I App.jsx lägger du till nedanstående tillstånd och importerar <code>useState</code> från React:

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

useState är en inbyggd krok i React som används för att lägga till tillstånd i en komponent, ett tillstånd som hänvisar till data eller en egenskap.

posts används för att hämta data från tillståndet. setPosts nyttjas för att lägga till nya data i inlägget. Vi har dessutom skickat en tom array till tillståndet som standard.

Lägg sedan till följande kod efter tillståndet för att hämta inläggen från WordPress REST API:

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()
  }, [])

Ovanstående kod kör fetchPosts()-funktionen när sidan laddas. Inuti fetchPosts()-funktionen skickar vi en GET-begäran till WordPress API med hjälp av Axios för att hämta inlägg och sedan spara till det tillstånd som deklarerades tidigare.

Steg 4: Skapa en bloggkomponent

Inuti rotkatalogen skapar du en ny mapp med namnet components och inuti den skapar du två nya filer: blog.jsx och blog.css.

Lägg först till följande kod i 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>
  );
}

I koden ovan har vi skapat en kortkomponent som tar egenskapen posts som innehåller information om blogginlägget från WordPress API.

I getImage()-funktionen använder vi sedan Axios för att hämta webbadressen till den utvalda bilden och därefter spara den informationen i tillståndet.

Vi lade sedan till en useEffect-krok för att anropa getImage()-funktionen när komponenten har monterats. Utöver detta lade vi dessutom till retursatsen där vi renderar inläggsdata, titel, utdrag och bild.

Lägg sedan till stilarna nedan i filen 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;
}

I filen App.jsx lägger du därefter till följande kod i uttalandet return för att rendera bloggkomponenten:

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

Så här ska din App.jsx slutligen se ut:

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>
  )
}

Spara filen och uppdatera din webbläsarflik. Nu bör du kunna se dina blogginlägg renderade på sidan.

Huvudlöst WordPress med React.js
Huvudlöst WordPress med React.js

Sammanfattning

Huvudlöst WordPress är ett utmärkt sätt att skapa snabba webbplatser med en skalbar arkitektur. Med hjälp av React och WordPress REST API är det dessutom enklare än någonsin att skapa dynamiska och interaktiva webbplatser med WordPress som innehållshanteringssystem.

Det är dock lika viktigt för hastigheten var du hostar din WordPress-webbplats. Kinsta är unikt positionerat för att tillhandahålla en blixtsnabb WordPress-hostingupplevelse med toppmoderna Google C2-maskiner på deras Premiumnivånätverk. Vi har dessutom en Cloudflare-integrering för att skydda din webbplats mot dataförlust och skadliga attacker.

Har du byggt – eller planerar du att bygga – en huvudlös WordPress-webbplats med React? Låt oss veta i kommentarfältet nedan!

Suhail Kakar

Suhail är en mjukvaruutvecklare som har specialiserat sig på fullstack webb- och mobilapplikationsutveckling. Han är en aktiv bidragsgivare till projekt med öppen källkod och tycker om att bygga Web3-applikationer.