Czym jest headless CMS? Wyjaśnienie, przykłady, zastosowania i kod

Headless CMS (Content Management System) to nowoczesny system zarządzania treścią, który oddziela warstwę prezentacji (frontend) od zaplecza, czyli warstwy zarządzania treścią (backend). W przeciwieństwie do tradycyjnych CMS-ów, takich jak klasyczny WordPress czy Joomla, w headless CMS interfejs użytkownika nie jest z góry zdefiniowany – dostarczany jest jedynie backend do zarządzania treścią oraz API (np. REST lub GraphQL) do jej pobierania i wyświetlania na dowolnym froncie.

Co to za pojęcie?

W terminologii IT „headless” oznacza „bez głowy” – czyli bez jednej, konkretnej warstwy wizualnej. Kluczowa różnica:

Tradycyjny CMS: frontend i backend są połączone; szablony stron są częścią systemu.
Headless CMS: backend (panel administracyjny i baza danych) jest oddzielony od frontendu, który może zostać napisany w dowolnej technologii.

Jak wygląda headless CMS i czym się cechuje?

Headless CMS to zazwyczaj panel administracyjny w przeglądarce, pozwalający tworzyć, edytować i zarządzać treścią. Treści można pobierać poprzez API, np. w formacie JSON.
Cechy charakterystyczne:

Dostarcza treść przez API (REST, GraphQL)
Nie narzuca wyglądu ani sposobu prezentacji treści
Umożliwia publikację treści na różnych platformach: WWW, mobile, IoT, aplikacje desktopowe itd.
Lepsza integracja z nowoczesnymi stackami frontendowymi (React, Vue, Angular)

Przykłady wykorzystania headless CMS

Strony i aplikacje, które wymagają kilku kanałów publikacji (omnichannel): strona internetowa, aplikacja mobilna, smart TV itp.
Blogi i portale korzystające z nowoczesnych generatorów statycznych (np. Gatsby, Next.js)
Sklepy internetowe, gdzie frontend jest budowany pod indywidualne potrzeby, a treści są zarządzane centralnie.

Popularne przykłady headless CMS

Strapi – popularny, open source, obsługujący REST i GraphQL.
Contentful – platforma SaaS, przyjazna dla deweloperów i marketerów.
Sanity – głównie poprzez API, bardzo elastyczny.
DatoCMS, Prismic, Netlify CMS, a także…
WordPress Headless – klasyczny WordPress z wyłączonym szablonem i dostępem do treści przez REST API. Dzięki temu można korzystać z WordPressa wyłącznie jako panelu do edycji treści, a prezentację zrobić np. w React/Next.js.

Przykład kodu – pobranie postów z headless WordPressa (REST API)

// Przykład prostego fetcha w React
import React, { useEffect, useState } from 'react';

function BlogPosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://twoja-domena.pl/wp-json/wp/v2/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

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

export default BlogPosts;

Podsumowanie

Headless CMS to elastyczne narzędzie, które znacząco ułatwia budowanie nowoczesnych aplikacji i stron internetowych. Umożliwia oddzielenie warstwy zarządzania treścią od prezentacji, co daje większą swobodę deweloperom i ułatwia wielokanałowe publikowanie treści. Wersja „headless” jest dostępna nawet dla tak znanych systemów jak WordPress, który poprzez REST API pozwala korzystać z zalet architektury headless.

Tags: cms headless cms strapi