01Portfolio
WirePress — headless WordPress + Next.js
Wtyczka, dzięki której WordPress służy tylko do edycji treści, a stronę wyświetla szybki frontend w Next.js. Redaktor pracuje w panelu, który zna, a zmiany trafiają na stronę po kilku sekundach. Gotowe strony odpowiadają ok. 35 razy szybciej niż w klasycznym WordPressie.
W liczbach
- Szybciej niż klasyczny WordPress
- ~35×
- Powtórzone zapytanie o treść
- 230 → 7 ms
- Testy wtyczki i frontendu
- 133
Problem
Gdy WordPress służy tylko do edycji, a stronę wyświetla osobny frontend, po każdej zmianie trzeba mu dać znać. Jeśli WordPress robi to w trakcie zapisu, wolny albo niedostępny frontend blokuje panel redaktora: w moim pomiarze jedno żądanie trwało 20,4 s. Jeśli powiadomienie niesie samą treść, jedno zgubione zostawia na stronie starą wersję na stałe. Do tego redaktor traci podgląd szkicu, a samo uruchamianie WordPressa zajmuje ok. jednej trzeciej czasu odpowiedzi, więc żadna optymalizacja wewnątrz niego nie zejdzie niżej.
Podejście
Rozdzieliłem treść od powiadomień. Frontend sam pobiera treść z WordPressa, a powiadomienie mówi mu tylko, które adresy odświeżyć. Każde jest podpisane kluczem danego frontendu, więc nie da się go podrobić. Zmiany z jednego zapisu trafiają do kolejki i wychodzą w tle, z ponowieniem po 1, 5 i 15 minutach, dzięki czemu panel odpowiada od razu. Powtarzające się zapytania o treść obsługuje cache, który odpowiada, zanim WordPress w ogóle się uruchomi. Strony w Next.js 16 są statyczne i odświeżane tylko tam, gdzie coś się zmieniło, a przy budowaniu treść przychodzi paczkami po 100 stron. W panelu redaktor widzi kolejkę z opisem błędów, może sprawdzić połączenie i wymienić klucze, a szkic ogląda w docelowym wyglądzie strony.
Efekt
Mierzyłem w symulatorze wbudowanym we wtyczkę, na 316 wpisach z obrazkami i jednej maszynie. Strona statyczna odpowiada w 13 ms (mediana), klasyczny WordPress w 451 ms. Strona generowana na żądanie przyspieszyła z 1213 do 53 ms, a powtórzone zapytanie o treść z 230 do 7 ms. Pełna budowa 343 stron trwa 25 s. Zmiana z panelu jest na stronie po 1,4–5 s, a niedostępny frontend nie spowalnia już WordPressa (20,4 s → 0,35 s na żądanie). Wtyczkę i frontend sprawdzają 133 testy automatyczne.
Jak to działa
01
Treść i powiadomienie to dwa kanały
Frontend sam pobiera treść z WordPressa, a powiadomienie mówi mu tylko, co się zmieniło. Gdy jedno zginie, strona nie zostaje ze starą wersją na stałe, bo treść zawsze pochodzi prosto z WordPressa.
02
Kolejka, która nie blokuje redaktora
Zmiany z jednego zapisu idą do kolejki jako jedna paczka i wychodzą w tle. Nieudaną wysyłkę wtyczka ponawia po 1, 5 i 15 minutach. W panelu widać, co poszło nie tak, a przycisk „Ponów” wysyła ją jeszcze raz.
03
Wtyczka wie, co odświeżyć
Wtyczka sama wylicza, które adresy trzeba odświeżyć, np. /blog/nazwa-wpisu. Frontend niczego nie musi dopasowywać: sprawdza tylko podpis powiadomienia i odświeża wskazane strony.
04
Odpowiedź, zanim WordPress się uruchomi
Na powtórzone zapytanie o treść odpowiada zapisany wcześniej plik, zanim WordPress zdąży się uruchomić. Cache pomija zalogowanych użytkowników, zmiany danych i odpowiedzi z błędami. Czas odpowiedzi spada z 230 do 7 ms.
05
Podgląd szkiców na froncie
Przycisk „Podgląd” pokazuje nieopublikowany wpis w docelowym wyglądzie strony, bez konfigurowania dodatkowych haseł. Link podglądu wygasa po godzinie i nie trafia do wyszukiwarek.