Nowoczesne podejście do tworzenia stron w oparciu o WordPressa – architektura headless

WordPress jako najpopularniejszy CMS

Tradycyjny wordpress to obecnie najpopularniejszy system zarządzania treścią (CMS), który umożliwia budowanie i zarządzanie stronami internetowymi, blogami, sklepami i innymi typami witryn. Jest narzędziem, które z założenia jest proste w obsłudze i intuicyjne dla użytkownika. Według danych z W3Techs (https://w3techs.com) prawie 44% Internetu korzysta właśnie z tego rozwiązania. Miażdżąca większość z nich używa niestety gotowych szablonów php przygotowanych przez innych użytkowników, czy też mocno niezoptymalizowanego Elementora – wtyczki do blokowej budowy strony z łatwą integracją. Wynikiem tego są słabo zabezpieczone witryny, które działają jak 188 tonowy czołg.

Wraz z wzrostem popularności tego CMSa przestał on być tylko zabawką, a stał się realnym rozwiązaniem, które jest powszechnie używane przez firmy specjalizujące się w tworzeniu stron internetowych oraz freelancerów. Niestety w ten najprostszy, generujący najwięcej problemów sposób.

Warto wspomnieć, że WordPress oferuje nie tylko system postów i stron, ale również rozbudowany system zarządzania mediami, użytkownikami, komentarzami oraz ogromny ekosystem wtyczek i motywów, które przyciągają zarówno początkujących, jak i zaawansowanych użytkowników.

Dlaczego warto postawić na architekturę headless zamiast tradycyjnego wordpressa?

Wszyscy doskonale wiemy, że jak coś jest do wszystkiego to jest do niczego. Tak właśnie jest z gotowymi szablonami – często powstają w jednym celu, żeby zarobić, a jeśli ma zarobić to musi trafić do jak największej liczby osób. Tak powstają szablony, które mają miliony opcji i tryliony wariantów, oczywiście w większości płatnych. Wszystko to mocno obciąża stronę i spowalnia jej działanie, a przecież wszyscy wiemy, że czas ładowania jest na wagę złota, to on decyduje czy użytkownik zostanie z nami czy poszuka czegoś innego. Z badań wynika, że strona ładująca się dłużej niż 3 sekundy odstrasza klientów.

Bardzo podobnie jest z Elementorem, wtyczką, która podobnie jak szablony posiada dużo opcji konfiguracji strony, tym razem od zera. Jest ona wybitnie obciążająca co niejednokrotnie widać od razu po wejściu na stronę.

Przykładowo, strona oparta na typowym szablonie z Elementorem może uzyskać wynik 30–60 punktów w testach wydajnościowych Google PageSpeed, podczas gdy ta sama zawartość zaimplementowana w Next.js osiąga ponad 90 punktów.

W tym momencie na przeciw wychodzi trzecie rozwiązanie – headless WordPress. Jest to tak naprawdę ten sam system, co w poprzednich przykładach, ale odchudzony o szablony i niepotrzebne wtyczki. Cały wygląd strony, czyli frontend korzysta z odrębnej technologii wybranej przez dewelopera. Mamy tu pełną dowolność, możemy użyć nowoczesnych technologii takich jak ReactJS, NextJS, VUE.js, Angular czy nawet możemy zbudować aplikację mobilną za pomocą React Native – pełna dowolność.

My natomiast skupimy się na połączeniu z NextJS – frameworkiem javascript, który pozwala na optymalizację wielu aspektów strony internetowej. Posiada wbudowaną wielowymiarową optymalizację zdjęć, które są jednym z najbardziej obciążających elementów na stronie. (Link do artykułu o optymalizacji zdjęć). 

Dzięki wbudowanemu REST API, WordPress jest w stanie „działać w tle” i wysyłać dane o postach, stronach, mediach i wszystkim co tylko jest potrzebne aplikacji zbudowanej nawet na odrębnym serwerze. To sprawia, że użytkownik może cieszyć się łatwością w dodawaniu treści za pomocą panelu administratora, a odbiorca może zobaczyć wyniki w aplikacji frontendowej, która jest o wiele szybsza od tradycyjnego odpowiednika.

Headless to nie tylko kwestia wydajności – to również znacznie większa kontrola nad strukturą DOM, stylem i logiką działania strony. Umożliwia to tworzenie bardziej interaktywnych i przemyślanych doświadczeń użytkownika, które są trudne do osiągnięcia w klasycznych szablonach WP.

Przygotowanie do wdrożenia technologii headless w WordPressie

WordPress od razu po zainstalowaniu na serwerze nie będzie w stanie obsłużyć żądań z frontu strony. Przygotowanie odpowiednich ustawień nie należy natomiast do najtrudniejszych rzeczy. Żeby API sprawnie działało, w ustawieniach WP trzeba zmienić opcję odnośników, aby wyświetlały się jako „Nazwa wpisu”. Dzięki temu uzyskamy nie tylko możliwość korzystania z API ale również przyjazne dla użytkowników linki.

Zamiast paskudnego https://example.pl/?p=123 dostajesz https://examlpe.pl/tytul-twojego-wpisu. Od razu lepiej, prawda?

Aby móc przekazywać więcej danych za pomocą wpisów niezbędna również może okazać się wtyczka ACF, lub samodzielna konfiguracja niestandardowych pól wpisów (jest to o wiele trudniejsze i bez grzebania w kodzie WP się nie obejdzie). Dzięki temu do wpisów można dołączyć praktycznie wszystko!

Oczywiście trzeba też pamiętać o bezpieczeństwie, stosujemy uwierzytelnianie JWT lub oAuth, aby tylko uprawnieni mogli publikować lub modyfikować treści. Jeśli natomiast cała logika będzie pochodzić z panelu WP to najlepiej wyłączyć te endpointy (ścieżki, po których podpinamy się do API), które są wrażliwe na atak.

Gdy już mamy wszystko skonfigurowane to można pobierać dane w NextJS. Poniżej przykład takiej integracji.

Przykładowy endpoint w NEXTJS API pobierający dane z REST API WP

export default async function handler(req, res) {
  if (req.method === 'GET') {
    try {
      const response = await fetch('https://twoja-domena.pl/wp-json/wp/v2/posts?_embed&per_page=10');
      if (!response.ok) {
        throw new Error(`Błąd pobierania danych: ${response.statusText}`);
      }
      const posts = await response.json();
      res.status(200).json(posts);
    } catch (error) {
      console.error('Błąd podczas pobierania postów:', error);
      res.status(500).json({ error: 'Wystąpił problem podczas pobierania postów.' });
    }
  } else {
    res.setHeader('Allow', ['GET']);
    res.status(405).end(`Metoda ${req.method} nie jest dozwolona.`);
  }
}

Przykładowy komponent pobierający i wyświetlający posty

import { useEffect, useState } from 'react';

export default function PostList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const res = await fetch('/api/posts');
        if (!res.ok) {
          throw new Error(`Błąd pobierania danych: ${res.statusText}`);
        }
        const data = await res.json();
        setPosts(data);
      } catch (error) {
        console.error('Błąd podczas pobierania postów:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, []);

  if (loading) return <p>Ładowanie postów...</p>;

  return (
    <div>
      <h1>Posty z WordPressa</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title.rendered}</h2>
            <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
          </li>
        ))}
      </ul>
    </div>
  );
}

Oczywiście warto też przemyśleć strukturę plików i sposób hostowania aplikacji. Najprostsze i najbardziej kompaktowe rozwiązanie (przy założeniu, że korzystamy ze statycznego generowania w NextJS) to umieszczenie zarówno front-endu (np. framework Next.js), jak i back-endu (WordPressa) na jednym serwerze, a następnie skonfigurowanie odpowiednich przekierowań – np. główna domena może wskazywać na aplikację frontendową, a subdomena (np. api.twojadomena.pl) lub inny port – na WordPressa. W takiej konfiguracji wystarczy odpowiednio ustawić plik .htaccess oraz przekierowania domeny u dostawcy hostingu.

Alternatywą jest rozdzielenie frontu i backendu na dwa osobne serwery – to popularna praktyka przy bardziej rozbudowanych projektach, szczególnie na serwerach VPS. Z doświadczenia mogę polecić rozwiązania OVH – przy zakupie domeny otrzymujemy darmowe 100 MB przestrzeni dyskowej, co w zupełności wystarczy np. na prostego bloga opartego o WordPressa pełniącego funkcję tylko backendu.

SEO a Headless WP

Headless wordpress to nowoczesne podejście, które nie wyklucza skutecznej optymalizacji pod wyszukiwarki. Szybkie ładowanie strony to na pewno jedna z wielu zalet. Generowanie statycznych stron zapewnia widoczność HTML-a na starcie, a dynamiczne meta­tagi i Open Graph można ustawić w kodzie NextJS. Dodatkowo, w procesie budowania generujemy mapę witryny (sitemap.xml) i plik robots.txt. NextJS posiada także jeszcze jedną potężną funkcję – ISR. Dzięki temu jesteśmy w stanie generować na bieżąco statyczne strony dla każdego z wpisów bez ręcznego wywołania. Wpisy będą lepiej widoczne dla botów indeksujących strony, a użytkownik nie musi się martwić, żeby odświeżać stronę. Wilk syty i owca cała.

Zalety i wady nowoczesnego podejścia headless

Zacznijmy od zalet, zawsze miło zacząć od czegoś pozytywnego.

• Elastyczność – możesz wybrać dowolną technologię, która ma współpracować z twoim wordpressowym backendem, React, Next, Vue czy nawet aplikacje mobilne w React Native, dzięki temu projektanci mogą pozowlić sobie na większą swobodę w tworzeniu unikalnych designów.
• Lepsza wydajność – znacznie lepsze wyniki w porównaniu z gotowymi szablonami i Elementorem. Strony ładują się błyskawicznie, a w połączeniu z zaletami NextJS są jeszcze bardziej zoptymalizowane.
• Większe bezpieczeństwo – mniejszy kontakt użytkownika z warstwą serwera.
• Skalowalność – łatwo podłączyć inne źródła danych lub usługi zewnętrzne. Można podłączyć wiele stron lub projektów pod jeden backend.
• Nowoczesny UX/UI – większa kontrola nad interfejsem i zachowaniem aplikacji.

Wady:

• Większa złożoność – wymaga doświadczenia zespołu, nie tylko w WordPressie, ale także w nowoczesnych frameworkach frontendowych i DevOps (np. konfiguracja środowisk, budowania i deployu aplikacji)
• Trochę większe koszty wdrożenia – więcej pracy programistów
• Więcej uwagi na SEO – konieczność samodzielnej obsługi meta danych, mapy witryny itd. – co może być również traktowane jako zaleta, ze względu na większą kontrolę.

Kto powinien rozważyć wdrożenie headless WordPress?

Podejście headless sprawdzi się nie tylko w zaawansowanych projektach z dużym ruchem czy złożoną architekturą. Tak naprawdę to rozwiązanie dla każdego, kto chce mieć szybciej działającą stronę z nowoczesnym frontendem i jednocześnie prostym systemem zarządzania treścią. Nadaje się zarówno do prowadzenia bloga, portfolio, strony firmowej, jak i aplikacji z możliwością dodawania treści przez użytkowników – np. recenzji, komentarzy, opinii czy artykułów. Dodatkowo korzystając z podejścia headless otwieramy się na możliwość implementacji zaawansowanych funkcji. 

Z jednej strony zyskujemy pełną kontrolę nad wyglądem i wydajnością strony, z drugiej – zachowujemy znany i lubiany panel WordPressa. To doskonała opcja dla osób i firm, które nie chcą być ograniczane przez gotowe szablony, a jednocześnie nie chcą rezygnować z prostoty zarządzania treścią. Dlatego warto rozważyć implementację tych rozwiązań, aby stworzyć nowoczesne, wydajne i łatwe w zarządzaniu strony internetowe.

Podsumowanie

Headless WordPress pozwala na elastyczność w projektowaniu wydajnych i zoptymalizowanych witryn. Oddzielenie CMS-a od frontendu otwiera ogromne możliwości dla projektantów i deweloperów, umożliwiając tworzenie interaktywnych doświadczeń przy zachowaniu prostoty zarządzania treścią. Jeśli zależy Ci na wydajności, nowoczesnym stacku i swobodzie technologicznej, headless WordPress może okazać się strzałem w dziesiątkę.