====== Headless CMS ======

**Headless CMS** je systém pro správu obsahu, který funguje výhradně jako úložiště dat (backend). Označení „headless“ (bez hlavy) vychází z metaforického odříznutí „hlavy“ (prezentační vrstvy – frontendu) od „těla“ (úložiště a správy obsahu).



===== 1. Jak Headless CMS funguje? =====

V tradičním CMS (např. WordPress) jsou data a šablona pevně propojeny. V Headless CMS probíhá proces následovně:
  1. Správa obsahu: Redaktoři vkládají texty a obrázky do cloudu nebo aplikace (v rozhraní podobném tradičnímu CMS).
  2. Uložení: Obsah je uložen v surové formě (často jako strukturovaný JSON).
  3. Distribuce (API): Vývojáři si obsah vyžádají pomocí rozhraní [[it:dev:api|API]] (REST nebo GraphQL).
  4. Zobrazení: Vývojář si sám naprogramuje frontend v libovolné technologii (React, Vue, Swift, Flutter) a data do něj pouze vykreslí.

----

===== 2. Porovnání: Tradiční vs. Headless CMS =====

^ Vlastnost ^ Tradiční CMS ^ Headless CMS ^
| **Architektura** | Propojená (Monolit) | Oddělená (Decoupled) |
| **Frontend** | Omezen šablonami systému | Zcela libovolný (Omnichannel) |
| **Závislosti** | Nutnost znát PHP/databázi systému | Stačí umět pracovat s API |
| **Rychlost** | Často pomalejší (nutnost renderovat na serveru) | Velmi vysoká (data se načítají asynchronně) |
| **Bezpečnost** | Větší plocha pro útok (např. pluginy) | Bezpečnější (backend není přímo přístupný) |

----

===== 3. Hlavní výhody =====

  * **Omnichannel:** Jeden obsah můžete publikovat současně na webu, v mobilní aplikaci, na infostánku i v chytrých hodinkách.
  * **Flexibilita pro vývojáře:** Programátoři nejsou omezeni jazykem CMS (např. PHP) a mohou používat moderní frameworky.
  * **Lepší výkon ([[lcp|LCP]]):** Protože frontend je nezávislý, lze jej optimalizovat pro extrémní rychlost načítání.
  * **Snadná škálovatelnost:** Backend v cloudu se snadno přizpůsobí vysoké zátěži.

----

===== 4. Nevýhody a výzvy =====

  * **Chybějící náhled (Live Preview):** Redaktoři často nevidí okamžitě, jak bude článek vypadat na webu (nutno doprogramovat).
  * **Technická náročnost:** Vyžaduje zkušené frontend vývojáře; není to řešení "pro každého na dvě kliknutí".
  * **Cena:** Často se platí za počet požadavků na API nebo za objem dat v cloudu.

----

===== 5. Příklady populárních Headless CMS =====

  * **Strapi:** Open-source řešení v JavaScriptu, které si můžete hostovat sami.
  * **Contentful:** Průmyslový standard v cloudu (SaaS).
  * **Sanity:** Velmi flexibilní systém s důrazem na real-time spolupráci.
  * **Ghost:** Původně blogovací platforma, která dnes nabízí plnohodnotné Headless rozhraní.

----

===== 6. Kdy zvolit Headless přístup? =====

Headless CMS je ideální volbou, pokud:
  * Budujete komplexní webovou aplikaci pomocí React/Vue/Next.js.
  * Potřebujete doručovat stejný obsah do více různých zařízení.
  * Chcete mít maximální kontrolu nad výkonem a [[google_lighthouse|Lighthouse skóre]].

----
//Související články://
  * [[it:dev:cms|CMS – Redakční systémy (obecně)]]
  * [[it:dev:api|API – Rozhraní pro programování]]
  * [[it:dev:lcp|LCP – Výkon a rychlost webu]]

//Tagy: {{tag>cms headless api web-dev react vue json architecture}}//