WordPress als Headless CMS mit React

Schmuckelement Welle

WordPress als Headless CMS mit React

Tech-News

Einführung

WordPress, die weltweit meistgenutzte Content-Management-Plattform, hat sich mit dem Aufkommen von Headless CMS-Architekturen weiterentwickelt. Anstatt die gesamte Website mit dem klassischen WordPress-Frontend zu rendern, setzen viele Entwickler heutzutage auf React, um benutzerfreundliche und performante Anwendungen zu erstellen. In diesem Artikel zeigen wir, wie Sie WordPress als Headless CMS mit React kombinieren können, um die Flexibilität und Performance Ihrer Webanwendungen zu maximieren.

1. Warum WordPress als Headless CMS verwenden?

  • Flexibilität: Trennen Sie die Inhalte (Backend) von der Darstellung (Frontend), um maßgeschneiderte Benutzererlebnisse zu schaffen.
  • Leistung: Nutzen Sie React für eine schnellere und reaktionsschnellere Website.
  • Skalierbarkeit: Integrieren Sie WordPress-Inhalte in verschiedene Frontend-Frameworks und mobile Apps.

2. Voraussetzungen und Setup

  • WordPress (mit aktivierter REST API)
  • Node.js und npm zur Installation von React
  • Create React App oder Next.js für die React-Umgebung

3. WordPress Headless mit React: Schritt-für-Schritt-Anleitung

3.1. Einrichten des WordPress-Backends

# Prüfen Sie die REST API:
https://your-domain.com/wp-json/wp/v2/posts
  • Stellen Sie sicher, dass die Permalinks auf „Beitragsname“ eingestellt sind.
  • Nutzen Sie das Plugin JWT Authentication for WP-REST API für geschützte Endpunkte.

3.2. Aufbau der React-Anwendung

# React-Projekt erstellen
npx create-react-app my-wordpress-react
cd my-wordpress-react
npm start

API-Anfragen mit Axios:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const WordPressPosts = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('https://your-domain.com/wp-json/wp/v2/posts')
      .then(response => setPosts(response.data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h1>WordPress Posts</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title.rendered}</h2>
          <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
        </div>
      ))}
    </div>
  );
};

export default WordPressPosts;

4. Erweiterte Funktionen: Optimierung und Sicherheit

4.1. Client-seitiges Caching mit React Query

# React Query installieren
npm install @tanstack/react-query

Beispiel mit React Query:

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchPosts = async () => {
  const { data } = await axios.get('https://your-domain.com/wp-json/wp/v2/posts');
  return data;
};

const WordPressPosts = () => {
  const { data: posts, isLoading, error } = useQuery(['posts'], fetchPosts);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading posts</p>;

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title.rendered}</h2>
          <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
        </div>
      ))}
    </div>
  );
};

export default WordPressPosts;

5. Beispielprojekt: Headless Blog mit WordPress und React

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import WordPressPosts from './components/WordPressPosts';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<WordPressPosts />} />
      </Routes>
    </Router>
  );
}

export default App;

6. Fazit

Die Kombination von WordPress als Headless CMS mit React bietet eine leistungsstarke Möglichkeit, moderne und skalierbare Webanwendungen zu erstellen. Nutzen Sie die Flexibilität von React und die robuste Content-Verwaltung von WordPress, um benutzerfreundliche und performante Websites zu entwickeln.

Weiterführende Quellen

Fragen oder Anmerkungen? Hinterlassen Sie einen Kommentar oder kontaktieren Sie uns!

Zurück zur Übersicht