01Portfolio
WirePress — Headless WordPress + Next.js
Ein Plugin, mit dem WordPress nur noch zum Bearbeiten von Inhalten dient, während ein schnelles Next.js-Frontend die Website ausliefert. Der Redakteur arbeitet im gewohnten Panel, und Änderungen erscheinen nach wenigen Sekunden auf der Website. Fertige Seiten antworten etwa 35-mal schneller als in klassischem WordPress.
In Zahlen
- Schneller als klassisches WordPress
- ~35×
- Wiederholte Inhaltsabfrage
- 230 → 7 ms
- Tests von Plugin und Frontend
- 133
Aufgabe
Wenn WordPress nur zum Bearbeiten dient und ein separates Frontend die Website ausliefert, muss man diesem nach jeder Änderung Bescheid geben. Tut WordPress das während des Speicherns, blockiert ein langsames oder nicht erreichbares Frontend das Redaktionspanel: In meiner Messung dauerte eine einzelne Anfrage 20,4 s. Wenn die Benachrichtigung den Inhalt selbst enthält, hinterlässt eine verlorene dauerhaft eine veraltete Version auf der Website. Dazu verliert der Redakteur die Entwurfsvorschau, und allein der Start von WordPress beansprucht etwa ein Drittel der Antwortzeit, sodass keine Optimierung innerhalb von WordPress darunter kommt.
Vorgehen
Ich habe Inhalt und Benachrichtigung getrennt. Das Frontend holt den Inhalt selbst aus WordPress, und die Benachrichtigung sagt ihm nur, welche Adressen es aktualisieren soll. Jede ist mit dem Schlüssel des jeweiligen Frontends signiert und lässt sich daher nicht fälschen. Änderungen aus einem Speichervorgang landen in einer Warteschlange und gehen im Hintergrund hinaus, mit Wiederholungen nach 1, 5 und 15 Minuten, sodass das Panel sofort antwortet. Wiederholte Inhaltsabfragen bedient ein Cache, der antwortet, bevor WordPress überhaupt gestartet ist. Seiten in Next.js 16 sind statisch und werden nur dort aktualisiert, wo sich etwas geändert hat, und beim Build kommen die Inhalte in Paketen von 100 Seiten. Im Panel sieht der Redakteur die Warteschlange mit Fehlerbeschreibungen, kann die Verbindung prüfen und Schlüssel austauschen und sieht Entwürfe im endgültigen Design der Website.
Ergebnis
Ich habe im Simulator gemessen, der im Plugin eingebaut ist, mit 316 Beiträgen mit Bildern auf einer einzigen Maschine. Eine statische Seite antwortet in 13 ms (Median), klassisches WordPress in 451 ms. Eine bei Abruf erzeugte Seite wurde von 1213 auf 53 ms schneller, eine wiederholte Inhaltsabfrage von 230 auf 7 ms. Der vollständige Build von 343 Seiten dauert 25 s. Eine Änderung aus dem Administrationsbereich ist nach 1,4–5 s auf der Website, und ein nicht erreichbares Frontend bremst WordPress nicht mehr aus (20,4 s → 0,35 s pro Anfrage). Plugin und Frontend werden von 133 automatisierten Tests geprüft.
So funktioniert es
01
Inhalt und Benachrichtigung laufen getrennt
Das Frontend holt die Inhalte selbst aus WordPress, und die Benachrichtigung sagt ihm nur, was sich geändert hat. Geht eine verloren, bleibt die Seite nicht dauerhaft auf einer alten Version, denn der Inhalt kommt immer direkt aus WordPress.
02
Eine Warteschlange, die die Redakteure nie blockiert
Änderungen aus einem Speichervorgang gelangen als ein Paket in die Warteschlange und werden im Hintergrund gesendet. Einen fehlgeschlagenen Versand wiederholt das Plugin nach 1, 5 und 15 Minuten. Im Panel sehen Sie, was schiefgelaufen ist, und die Schaltfläche „Erneut senden“ schickt ihn noch einmal.
03
Das Plugin weiß, was zu aktualisieren ist
Das Plugin ermittelt selbst, welche Adressen aktualisiert werden müssen, z. B. /blog/nazwa-wpisu. Das Frontend muss nichts zuordnen: Es prüft nur die Signatur der Benachrichtigung und aktualisiert die genannten Seiten.
04
Eine Antwort, bevor WordPress startet
Auf eine wiederholte Inhaltsabfrage antwortet eine zuvor gespeicherte Datei, noch bevor WordPress starten kann. Der Cache überspringt angemeldete Nutzer, Datenänderungen und Fehlerantworten. Die Antwortzeit sinkt von 230 auf 7 ms.
05
Entwurfsvorschau im Frontend
Die Schaltfläche „Vorschau“ zeigt einen unveröffentlichten Beitrag im endgültigen Erscheinungsbild der Website, ohne zusätzliche Passwörter einzurichten. Der Vorschau-Link läuft nach einer Stunde ab und bleibt aus den Suchmaschinen heraus.