Headless WordPress + Next.js – kiedy to ma sens dla małej firmy

Headless WordPress w połączeniu z Next.js to architektura, która zdobywa coraz więcej zwolenników wśród developerów i właścicieli firm. Ale czy ma sens dla małej firmy, która potrzebuje strony wizytówkowej lub prostego serwisu usługowego? Zanim zainwestujesz czas i budżet, warto zrozumieć co zyskujesz, co tracisz i kiedy klasyczny WordPress jest po prostu lepszym wyborem.

W tym artykule wyjaśniamy architekturę headless od podstaw, opisujemy rolę WPGraphQL, omawiamy strategie renderowania (ISR, SSG), porównujemy headless z Gatsby oraz klasycznym WordPress. Na końcu znajdziesz konkretne kryterium decyzyjne dopasowane do budżetu i potrzeb małej firmy.

Co się dowiesz:

• Jak działa headless WordPress i czym różni się od klasycznego WP
• Kiedy ISR i SSG realnie poprawiają wydajność, a kiedy to przerost formy nad treścią
• Jakie są realne koszty utrzymania headless vs klasyczny WordPress
• Kiedy wybrać headless, a kiedy zostać przy klasycznym WP

Co to jest headless WordPress i jak działa architektura

W klasycznym WordPress backend (PHP, baza danych, logika CMS) i frontend (szablony, HTML wyświetlany użytkownikowi) są ze sobą ściśle połączone. WordPress generuje HTML na serwerze i odsyła gotową stronę do przeglądarki. Prosto, szybko do wdrożenia, dobrze poznane.

W architekturze headless WordPress pełni wyłącznie rolę backendu i CMS-a. Nie generuje HTML. Zamiast tego udostępnia dane przez API – najczęściej REST API lub GraphQL. Frontend to osobna aplikacja (w naszym przypadku Next.js), która pobiera dane z WordPress i sama generuje widoki.

Nazwa „headless” pochodzi właśnie stąd – ucinasz WordPress-owi „głowę” (frontend, Twig/PHP templates) i zostawiasz samo „ciało” (dane, media, struktura treści). System zarządzania treścią zostaje, mechanizm wyświetlania zmienia się całkowicie.

Według danych WordPress.org, WordPress zasila ponad 43% wszystkich stron w internecie. Coraz większy odsetek tych instalacji działa jako headless CMS.

WPGraphQL – jak WordPress rozmawia z Next.js

WPGraphQL to wtyczka, która dodaje do WordPress endpoint GraphQL. Zamiast dziesiątek osobnych zapytań REST API, Next.js wysyła jedno zapytanie GraphQL i dostaje dokładnie te dane, których potrzebuje – nic więcej, nic mniej.

Przykład zapytania GraphQL pobierającego tytuł i treść posta:

query GetPost($slug: String!) {
  postBy(slug: $slug) {
    title
    content
    date
    featuredImage {
      node {
        sourceUrl
        altText
      }
    }
    categories {
      nodes {
        name
        slug
      }
    }
  }
}

W porównaniu do REST API korzyści są wyraźne:

• Underfetching/overfetching znika – pobierasz dokładnie to, czego potrzebujesz
• Jedno zapytanie zamiast kilku (post + kategorie + autor + obraz)
• Mocna typizacja – błędy w zapytaniach wykryjesz na etapie developerskim
• Świetnie integruje się z @apollo/client lub lżejszym graphql-request

WPGraphQL obsługuje custom post types, ACF (Advanced Custom Fields), użytkowników, media i niemal każdą wtyczkę, która ma swoją integrację z WPGraphQL Gutenberg.

ISR i SSG – strategie renderowania w Next.js

Next.js oferuje kilka strategii renderowania stron. Dla headless WordPress najważniejsze są dwie:

SSG – Static Site Generation

Next.js pobiera dane z WordPress podczas budowania aplikacji (build time) i generuje statyczne pliki HTML. Strona wyświetla się błyskawicznie – serwer oddaje gotowy HTML bez żadnego przetwarzania.

Idealne dla: stron, które rzadko się zmieniają (strona firmowa, portfolio, landing page). Problem: zmiana treści w WordPress wymaga przebudowania całej aplikacji (nowego deployu).

ISR – Incremental Static Regeneration

ISR to ulepszone SSG. Strony są statyczne, ale Next.js może je odświeżać w tle po określonym czasie (np. co 60 sekund) lub na żądanie (on-demand revalidation przez webhook z WordPress).

Dla bloga lub strony z często aktualizowanymi treściami ISR to złoty środek – masz wydajność statycznej strony i aktualność danych zbliżoną do renderowania serwerowego.

Strategia	Szybkość	Aktualność danych	Złożoność	Idealny przypadek
SSG	Bardzo wysoka	Build time	Niska	Strona wizytówkowa
ISR	Wysoka	Co N sekund	Średnia	Blog, aktualności
SSR	Średnia	Na żądanie	Wysoka	Dane personalizowane
CSR	Zmienna	Natychmiastowa	Wysoka	Dashboardy, SPA

Plusy headless WordPress + Next.js

Wydajność powyżej klasycznego WordPress

Statyczne lub pre-renderowane strony Next.js serwowane z CDN (Vercel, Cloudflare) ładują się w ułamkach sekund. W praktyce osiągamy wyniki PageSpeed Insights 95+ dla stron zoptymalizowanych pod Core Web Vitals. Klasyczny WordPress z WooCommerce i kilkoma wtyczkami cache rzadko przebija 80.

Dane z Web Almanac 2024 pokazują, że mediana LCP dla stron WordPress wynosi 3,8s, podczas gdy strony oparte na Next.js osiągają medianę 1,9s.

Bezpieczeństwo – frontend bez dostępu do PHP

WordPress to najpopularniejszy CMS świata, co czyni go największym celem ataków. W architekturze headless panel admina WordPress (api.studiokalmus.com) może być całkowicie ukryty przed publicznym dostępem. Fronted Next.js nie wykonuje PHP, nie ma bazy danych, nie ma typowych wektorów ataku: SQL Injection, RCE przez podatne wtyczki, brute-force na /wp-login.php.

Niezależność frontend/backend

Zespół frontendowy może przebudować UI bez dotykania WordPress i odwrotnie – możesz zmienić CMS (np. przejść na Sanity lub Contentful) bez przepisywania frontu. Przy klasycznym WP zmiana theme’a = zmiana całego front-endu.

Developer experience

Next.js z TypeScript, Tailwind, hot reload, komponentami React – to środowisko, w którym nowoczesny developer pracuje chętnie i szybko. Klasyczne szablony PHP/Twig to zupełnie inny świat.

Minusy i ograniczenia – bądź uczciwy przed wyborem

Złożoność wdrożenia

Zamiast jednego systemu masz dwa: WordPress na serwerze + aplikacja Next.js na Vercel lub własnym VPS. Dwa miejsca do monitorowania, dwa miejsca gdzie coś może się zepsuć, dwa procesy deploymentu.

Jeśli zmienisz treść w WordPress i chcesz żeby pojawiła się natychmiast na stronie – potrzebujesz skonfigurowanego on-demand revalidation (webhook WP do Next.js). To nie jest rocket science, ale wymaga konfiguracji i testów.

Koszt developerski jest wysoki

Klasyczna strona WordPress z gotowym theme: 3-10 roboczodni. Headless WordPress + Next.js: 15-40 roboczodni, zależnie od zakresu. Różnica w kosztach realizacji wynosi często 3-5x.

Dla małej firmy szukającej prostej strony-wizytówki za 3000-5000 zł, headless WordPress w tej cenie jest nieosiągalny. Jeśli budżet to 15 000+ zł i masz specyficzne wymagania wydajnościowe lub skalowalnościowe – rozmowa jest inna.

Edycja treści może być mniej wygodna

Klasyczny WordPress z Gutenbergiem daje edytorowi podgląd na żywo (WYSIWYG). W headless editor pisze w WordPress, ale żeby zobaczyć jak strona wygląda dla użytkownika – musi otworzyć oddzielnie działający frontend. To utrudnia pracę osobom nieobeznanym z technologią.

Istnieją rozwiązania (Faust.js, Preview Mode w Next.js), ale wymagają dodatkowej konfiguracji.

Headless WordPress vs Gatsby – porównanie

Gatsby to framework JavaScript, który przez lata był synonimem headless WordPress. Dziś Next.js wygrał tę rywalizację, ale warto zrozumieć różnice:

Cecha	Next.js (headless WP)	Gatsby (headless WP)
Renderowanie	SSG, ISR, SSR, CSR – pełna elastyczność	Głównie SSG (Gatsby 5 dodał SSR)
Czas buildu (duże serwisy)	Szybki (ISR = nie przebudowuje wszystkiego)	Wolny dla tysięcy stron
Społeczność i ekosystem	Ogromny, aktywnie rozwijany	Mniejszy, spadek popularności po 2022
Hosting	Vercel, Netlify, własny serwer	Gatsby Cloud (zamknięty 2024), Netlify
Krzywa uczenia	Umiarkowana	Wyższa (GraphQL layer, plugin ecosystem)
Aktualność danych	ISR – odświeżanie bez pełnego buildu	Wymaga rebuildu lub DSG

Gatsby Cloud zostało zamknięte przez Netlify w 2024 roku. To ważny sygnał – dla nowych projektów Next.js jest bezpieczniejszym wyborem długoterminowo.

Koszty utrzymania – co realnie płacisz co miesiąc

Klasyczny WordPress na hostingu managed:

• Hosting (np. Kinsta Starter, WP Engine Personal): 30-80 USD/mies.
• Premium theme + wtyczki: 5-30 USD/mies. (licencje roczne przeliczone)
• Łącznie: 35-110 USD/mies.

Headless WordPress + Next.js:

• WordPress backend (VPS lub managed): 20-60 USD/mies.
• Hosting Next.js (Vercel Pro): 20 USD/mies. (free tier wystarczy dla małych stron)
• Łącznie: 20-80 USD/mies. (porównywalnie)

Koszty infrastruktury są zbliżone. Różnica pojawia się przy utrzymaniu – każda zmiana funkcjonalności w headless wymaga developera znającego Next.js. W klasycznym WordPress wiele zmian to kwestia instalacji wtyczki.

Jeśli chcesz poznać szczegóły wyceny strony zbudowanej w tej technologii, sprawdź nasz cennik.

Kiedy wybrać klasyczny WordPress, a kiedy headless

Zostań przy klasycznym WordPress gdy:

• Budżet poniżej 10 000 zł na realizację
• Potrzebujesz strony szybko (poniżej 4 tygodni)
• Treści edytuje osoba bez wiedzy technicznej i ważny jest WYSIWYG preview
• Potrzebujesz rozbudowanego e-commerce (WooCommerce + Allegro + integracje)
• Twoja strona ma mały ruch (poniżej 10 000 odwiedzin/mies.) i wydajność nie jest problemem
• Nie masz stałego dostępu do developera Next.js

Rozważ headless WordPress + Next.js gdy:

• Wydajność to priorytet biznesowy (sklep, landing z kampanii PPC, portal informacyjny)
• Masz duży ruch i zależy Ci na Core Web Vitals
• Potrzebujesz niestandardowego UI niemożliwego do osiągnięcia w klasycznym theme WP
• Chcesz oddzielić team contentowy od team developerskiego
• Budujesz aplikację hybrydową (strona + panel klienta + integracje API)
• Masz budżet powyżej 15 000-20 000 zł i planowanie długoterminowe

Jeśli nie masz pewności co wybrać dla swojej firmy – napisz do nas, bezpłatnie doradzimy.

Nasze doświadczenie – jak wygląda to w praktyce

Studio Kalmus realizuje strony w obu technologiach. Ten serwis (studiokalmus.com) działa właśnie w architekturze headless: WordPress jako CMS pod api.studiokalmus.com, Next.js jako frontend. Widzimy realne korzyści: PageSpeed regularnie powyżej 95, czas do pierwszego bajtu (TTFB) poniżej 100ms dzięki Vercel Edge Network.

Dla klientów z Piaseczna i okolic, którzy szukają tworzenia stron internetowych i mają konkretne wymagania wydajnościowe, headless to opcja którą rozważamy od razu. Dla mniejszych projektów usługowych z ograniczonym budżetem rekomendujemy klasyczne WordPress lub Next.js bez WordPress (z plikami MD lub prostym CMS).

Szczegółowy zakres usług znajdziesz na stronie projektowanie stron.

Najczęstsze błędy przy wdrożeniu headless WordPress

• Brak on-demand revalidation – treści w WordPress zmieniają się, ale strona Next.js pokazuje stare dane przez godziny. Rozwiązanie: webhook WordPress triggeruje revalidatePath w Next.js przy każdym zapisie posta.
• N+1 problem w GraphQL – jedno zapytanie na listę, potem osobne zapytanie dla każdego elementu. Rozwiązanie: DataLoader lub odpowiednie zagnieżdżenie zapytań WPGraphQL.
• Brak obsługi preview – redaktor nie widzi jak wygląda szkic przed publikacją. Rozwiązanie: Next.js Draft Mode + plugin WP do preview URL.
• Pominięcie image optimization – obrazy z WordPress serwowane bez optymalizacji. Next.js Image component z domeną WordPress w next.config.js rozwiązuje problem automatycznie.
• Zbyt złożony stack dla małego projektu – headless bez uzasadnienia biznesowego to przepłacanie za złożoność.

FAQ – Najczęstsze pytania

Czy headless WordPress jest bezpieczniejszy niż klasyczny?

Tak, pod warunkiem że panel admin WordPress nie jest publicznie dostępny. W architekturze headless frontend (Next.js) nie wykonuje PHP i nie ma dostępu do bazy danych. Ataki na typowe luki WordPress (xmlrpc.php, wp-login.php brute-force, podatne wtyczki) nie dotykają publicznej strony. WordPress można schować za VPN lub ograniczyć dostęp do panelu po IP.

Ile kosztuje wdrożenie headless WordPress dla małej firmy?

Minimalistyczna strona headless (5-10 stron statycznych, blog, formularz kontaktowy) to koszt rzędu 12 000-25 000 zł realizacji. Utrzymanie infrastruktury (hosting WP + Vercel) to 60-120 USD miesięcznie. Porównaj z klasycznym WordPress: realizacja 4 000-8 000 zł, utrzymanie 30-80 USD miesięcznie. Różnica ma uzasadnienie tylko przy konkretnych wymaganiach wydajnościowych lub skali.

Czy mogę samodzielnie edytować treści w headless WordPress?

Tak – panel WordPress działa identycznie jak w klasycznej instalacji. Piszesz posty, strony, dodajesz media w tym samym Gutenbergu. Jedyna różnica to brak podglądu live tego jak strona wygląda na frontendzie, bo frontend to osobna aplikacja. Przy dobrze skonfigurowanym Draft Mode w Next.js redaktor może jednak podejrzeć szkic przed publikacją.

Czy headless WordPress działa z WooCommerce?

Technicznie tak – istnieje WooCommerce + WPGraphQL integracja (wp-graphql-woocommerce). Jednak headless e-commerce to znacznie bardziej skomplikowane wdrożenie: koszyk, sesje użytkownika, płatności, stany magazynowe – wszystko musi być obsłużone po stronie Next.js. Dla większości małych sklepów klasyczny WooCommerce jest zdecydowanie lepszym wyborem. Więcej o sklepach internetowych przeczytasz na naszej stronie sklepy internetowe.

Jak szybko strona headless ładuje się w porównaniu do klasycznego WordPress?

Dobrze zbudowana strona Next.js z ISR serwowana z Vercel Edge osiąga TTFB 30-80ms i LCP poniżej 1,5s. Klasyczny WordPress z dobrym hostingiem i cache to TTFB 150-400ms i LCP 1,5-3,5s. Różnica jest realna, ale klasyczny WordPress dobrze zoptymalizowany (Cloudflare, odpowiedni hosting, WP Rocket) też osiąga wyniki w zielonym zakresie PageSpeed.

Czy Vercel to jedyna opcja hostingu dla Next.js?

Nie. Next.js można hostować na dowolnym serwerze Node.js (własny VPS z PM2 i Nginx), Netlify, Railway, Render, AWS (EC2, Lambda@Edge), Google Cloud Run. Vercel jest twórcą Next.js i oferuje najlepszą integrację oraz darmowy plan dla małych projektów, dlatego jest najczęstszym wyborem. Pełna dokumentacja hostingu na stronie Next.js Docs – Deploying.

Podsumowanie

Headless WordPress + Next.js to architektura z realnymi zaletami: wydajność, bezpieczeństwo, niezależność warstw. Ale te zalety mają swoją cenę – wyższy koszt realizacji, większa złożoność, trudniejsza edycja dla nie-technicznych użytkowników.

Dla małej firmy decyzja powinna być prosta: jeśli masz budżet powyżej 15 000 zł, specyficzne wymagania wydajnościowe i dostęp do developera Next.js – rozmawiajmy o headless. Jeśli potrzebujesz solidnej strony szybko i w rozsądnym budżecie – klasyczny WordPress lub Next.js z prostym CMS będzie lepszym wyborem.

Technologia ma służyć Twojemu biznesowi, nie odwrotnie.