1<!DOCTYPE html><html lang="en" dir="ltr" class="blog-wrapper blog-post-page plugin-blog plugin-id-default" data-has-hydrated="false"><head><meta charset="UTF-8"><meta name="generator" content="Docusaurus v3.9.2"><title data-rh="true">Headless CMS | AI/MCP-Ready Enterprise Headless CMS Kuroco | Trusted by 6,000+ Companies</title><meta data-rh="true" name="viewport" content="width=device-width, initial-scale=1.0"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" property="og:image" content="https://kuroco.app/kuroco-card.png"><meta data-rh="true" property="og:site_name" content="Kuroco"><meta data-rh="true" property="og:image:width" content="1200"><meta data-rh="true" property="og:image:height" content="630"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" name="twitter:image" content="https://kuroco.app/kuroco-card.png"><meta data-rh="true" name="twitter:site" content="@KurocoApp"><meta data-rh="true" name="twitter:creator" content="@KurocoApp"><meta data-rh="true" property="og:locale" content="en_US"><meta data-rh="true" property="og:locale:alternate" content="ja_JP"><meta data-rh="true" property="og:title" content="Headless CMS | AI/MCP-Ready Enterprise Headless CMS Kuroco | Trusted by 6,000+ Companies"><meta data-rh="true" name="description" content="A brief introduction to Headless CMS"><meta data-rh="true" property="og:description" content="A brief introduction to Headless CMS"><meta data-rh="true" property="og:type" content="article"><meta data-rh="true" property="article:published_time" content="2022-04-08T00:00:00.000Z"><meta data-rh="true" property="article:author" content="https://www.diverta.co.jp"><meta data-rh="true" property="og:url" content="https://kuroco.app/blog/headless-cms/"><link data-rh="true" rel="icon" href="/img/icon_kurocoDocument.svg"><link data-rh="true" rel="canonical" href="https://kuroco.app/blog/headless-cms/"><link data-rh="true" rel="alternate" href="https://kuroco.app/blog/headless-cms/" hreflang="en"><link data-rh="true" rel="alternate" href="https://kuroco.app/ja/blog/headless-cms/" hreflang="ja"><link data-rh="true" rel="alternate" href="https://kuroco.app/blog/headless-cms/" hreflang="x-default">
1<script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@id":"https://kuroco.app/blog/headless-cms","@type":"BlogPosting","author":{"@type":"Person","description":"Creator of Kuroco service","image":"https://github.com/diverta.png","name":"Diverta","url":"https://www.diverta.co.jp"},"datePublished":"2022-04-08T00:00:00.000Z","description":"A brief introduction to Headless CMS","headline":"Headless CMS","isPartOf":{"@id":"https://kuroco.app/blog","@type":"Blog","name":"Kuroco Blog"},"keywords":[],"mainEntityOfPage":"https://kuroco.app/blog/headless-cms","name":"Headless CMS","url":"https://kuroco.app/blog/headless-cms"}</script>
1<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="AI/MCP-Ready Enterprise Headless CMS Kuroco | Trusted by 6,000+ Companies RSS Feed"><link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="AI/MCP-Ready Enterprise Headless CMS Kuroco | Trusted by 6,000+ Companies Atom Feed"><link rel="preconnect" href="https://www.googletagmanager.com">
1<script>window.dataLayer=window.dataLayer||[],function(e,t,a,n,r){e[n]=e[n]||[],e[n].push({"gtm.start":new Date().getTime(),event:"gtm.js"});var d=t.getElementsByTagName(a)[0],g=t.createElement(a);g.async=!0,g.src="https://www.googletagmanager.com/gtm.js?id="+r+("dataLayer"!=n?"&l="+n:""),d.parentNode.insertBefore(g,d)}(window,document,"script","dataLayer","GTM-PBPV4WW")</script>
1<script id="cookieyes" type="text/javascript" src="https://cdn-cookieyes.com/client_data/ba8895040659f255dde04daa/script.js"></script>
1<script>!function(e,r){var t,o,s,i;r.__SV||window.posthog&&window.posthog.__loaded||(window.posthog=r,r._i=[],r.init=function(n,a,p){(s=e.createElement("script")).type="text/javascript",s.crossOrigin="anonymous",s.async=!0,s.src=a.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(i=e.getElementsByTagName("script")[0]).parentNode.insertBefore(s,i);var c=r;for(void 0!==p?c=r[p]=[]:p="posthog",c.people=c.people||[],c.toString=function(e){var r="posthog";return"posthog"!==p&&(r+="."+p),e||(r+=" (stub)"),r},c.people.toString=function(){return c.toString(1)+".people (stub)"},t="init Rr Mr fi Cr Ar ci Tr Fr capture Mi calculateEventProperties Lr register register_once register_for_session unregister unregister_for_session Hr getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Ur jr createPersonProfile zr kr Br opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing Dr debug M Nr getPageViewId captureTraceFeedback captureTraceMetric $r".split(" "),o=0;o<t.length;o++)!function(e,r){var t=r.split(".");2==t.length&&(e=e[t[0]],r=t[1]),e[r]=function(){e.push([r].concat(Array.prototype.slice.call(arguments,0)))}}(c,t[o]);r._i.push([n,a,p])},r.__SV=1)}(document,window.posthog||[]),posthog.init("phc_ArqBfwYIUoxA8frZIgECRfxv1NJKR74GKXyTwm0bYfJ",{api_host:"https://us.i.posthog.com",defaults:"2025-05-24",person_profiles:"identified_only"})</script>
1<link rel="stylesheet" href="/assets/css/styles.a19539fb.css">
1<script src="/assets/js/runtime~main.c29d0c26.js" defer=""></script>
1<script src="/assets/js/main.529f4a6c.js" defer=""></script>
1<script type="application/ld+json">{ 2 "@context": "https://schema.org", 3 "@graph": [ 4 { 5 "@type": "Organization", 6 "@id": "https://www.diverta.co.jp/#organization", 7 "name": "Diverta Inc.", 8 "url": "https://www.diverta.co.jp/en/", 9 "logo": { 10 "@type": "ImageObject", 11 "@id": "https://www.diverta.co.jp/#logo", 12 "url": "https://www.diverta.co.jp/files/user/images/logo.svg", 13 "width": 155, 14 "height": 56 15 }, 16 "address": { 17 "@type": "PostalAddress", 18 "addressCountry": "JP", 19 "addressLocality": "Shinjuku", 20 "addressRegion": "Tokyo", 21 "postalCode": "162-0823", 22 "streetAddress": "Central Plaza 6F 1-1 Kaguragashi" 23 }, 24 "contactPoint": { 25 "@type": "ContactPoint", 26 "availableLanguage": [ 27 "Japanese", 28 "English" 29 ], 30 "contactType": "customer service", 31 "url": "https://kuroco.zendesk.com/hc/en-us" 32 }, 33 "foundingDate": "2005-01-27", 34 "sameAs": [ 35 "https://www.diverta.co.jp/", 36 "https://github.com/diverta" 37 ] 38 }, 39 { 40 "@type": "WebSite", 41 "@id": "https://kuroco.app/#website", 42 "name": "Kuroco | Enterprise Headless CMS Trusted by 6,000+ Companies", 43 "url": "https://kuroco.app/", 44 "description": "Enterprise Headless CMS for API-first development. Build flexible systems free from traditional CMS constraints with complete UI/UX design freedom.", 45 "publisher": { 46 "@id": "https://www.diverta.co.jp/#organization" 47 } 48 }, 49 { 50 "@type": "WebPage", 51 "@id": "https://kuroco.app/blog/headless-cms/#webpage", 52 "url": "https://kuroco.app/blog/headless-cms/", 53 "name": "Headless CMS", 54 "description": "A brief introduction to Headless CMS", 55 "inLanguage": "en", 56 "isPartOf": { 57 "@id": "https://kuroco.app/#website" 58 }, 59 "breadcrumb": { 60 "@id": "https://kuroco.app/blog/headless-cms/#breadcrumb" 61 }, 62 "potentialAction": [ 63 { 64 "@type": "ReadAction", 65 "target": [ 66 "https://kuroco.app/blog/headless-cms/" 67 ] 68 } 69 ] 70 }, 71 { 72 "@type": "BreadcrumbList", 73 "@id": "https://kuroco.app/blog/headless-cms/#breadcrumb", 74 "itemListElement": [ 75 { 76 "@type": "ListItem", 77 "position": 1, 78 "name": "Home", 79 "item": "https://kuroco.app/" 80 }, 81 { 82 "@type": "ListItem", 83 "position": 2, 84 "name": "headless-cms" 85 } 86 ] 87 }, 88 { 89 "@type": "Article", 90 "@id": "https://kuroco.app/blog/headless-cms/#article", 91 "headline": "Headless CMS", 92 "description": "A brief introduction to Headless CMS", 93 "author": { 94 "@id": "https://www.diverta.co.jp/#organization" 95 }, 96 "publisher": { 97 "@id": "https://www.diverta.co.jp/#organization" 98 }, 99 "image": "https://kuroco.app/kuroco-card.png", 100 "mainEntityOfPage": { 101 "@id": "https://kuroco.app/blog/headless-cms/#webpage" 102 }, 103 "inLanguage": "en" 104 } 105 ] 106}</script>
106</head><body class="navigation-with-keyboard">
vendor: 67 bytes, line 106
106<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
106GTM-PBPV4WW
vendor: 85 bytes, lines 106-108
106" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 107 108
109<svg style="display: none;"><defs> 110<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></symbol> 111</defs></svg>
112<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||"light"),document.documentElement.setAttribute("data-theme-choice",t||"light")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script>
112<div id="__docusaurus"><div class="z-[600] fixed h-screen w-full flex items-center justify-center invisible"><div><svg class="animate-spin h-40 w-40 text-gray-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-50" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="fill-primary" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></div></div><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="theme-announcement-bar announcementBar_mb4j" style="background-color:#fff8e1;color:#5f4300" role="banner"><div class="announcementBarPlaceholder_vyr4"></div><div class="content_knG7 announcementBarContent_xLdY">Some screenshots may not be displayed due to an outage of Gyazo, the service used to host them. We apologize for the inconvenience.</div><button type="button" aria-label="Close" class="clean-btn close closeButton_CVFx announcementBarClose_gvF7"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://kuroco.app/" target="_self" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="/img/logo.svg" alt="Kuroco home" class="themedComponent_mlkZ themedComponent--light_NVdE" height="37.5px"><img src="/img/logo_dark.svg" alt="Kuroco home" class="themedComponent_mlkZ themedComponent--dark_xIcU" height="37.5px"></div></a><a class="navbar__item navbar__link" href="/docs/">Home</a><a class="navbar__item navbar__link" href="/quick-guide/">Quick guide</a><a class="navbar__item navbar__link" href="/docs/about/about-kuroco/">About Kuroco</a><a class="navbar__item navbar__link" href="/docs/management/dashboard/">Admin Manual</a><a class="navbar__item navbar__link" href="/docs/about/support/">Support</a><a class="navbar__item navbar__link" href="/docs/faq/">FAQ</a><a class="navbar__item navbar__link" href="/docs/update/kuroco-roadmap/">Releases</a><a class="navbar__item navbar__link" href="/docs/about/sales/">Materials</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><button type="button" class=" button button--outline button--secondary py-3 px-3 border-0"><svg aria-hidden="true" class=" w-5 h-5 align-middle " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg><span class="sr-only">Search</span></button><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" class="iconLanguage_nlXk"><path fill="currentColor" d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></svg>English</a><ul class="dropdown__menu"><li><a href="/blog/headless-cms/" target="_self" rel="noopener noreferrer" class="dropdown__link dropdown__link--active" lang="en">English</a></li><li><a href="/ja/blog/headless-cms/" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="ja">æ¥æ¬èª</a></li></ul></div><a href="https://kuroco.zendesk.com/hc/en-us/requests/new?ticket_form_id=900002698263" target="_blank" rel="noopener noreferrer" class="button button--primary px-5 py-2 order-1 ml-0 md:ml-[15px]">Contact</a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR">
112<path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="light"><div class="container margin-vert--lg"><div class="row"><aside class="col col--3"><nav class="sidebar_re4s thin-scrollbar" aria-label="Blog recent posts navigation"><div class="sidebarItemTitle_pO2u margin-bottom--md">Recent posts</div><div role="group"><h3 class="yearGroupHeading_rMGB">2022</h3><ul class="sidebarItemList_Yudw clean-list"><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/what-is-a-reverse-proxy/">What is a reverse proxy</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/guide-to-choosing-an-enterprise-headless-cms/">A Guide to Choosing an Enterprise Headless CMS</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/git-based-vs-api-centric-headless-cms/">Git-based Vs API-centric Headless CMS</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/api-gateway-vs-backend-for-frontend/">API Gateway vs Backend For Frontend</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/what-is-a-progressive-web-app/">What is a Progressive Web App?</a></li></ul></div></nav></aside><main class="col col--7"><article class=""><header><h1 class="title_f1Hy">Headless CMS</h1><div class="container_mt6G margin-vert--md"><time datetime="2022-04-08T00:00:00.000Z">April 8, 2022</time> · <!-- -->7 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--12 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://www.diverta.co.jp" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo authorImage_XqGP" src="https://github.com/diverta.png" alt="Diverta"></a><div class="avatar__intro authorDetails_lV9A"><div class="avatar__name"><a href="https://www.diverta.co.jp" target="_blank" rel="noopener noreferrer"><span class="authorName_yefp" translate="no">Diverta</span></a></div><small class="authorTitle_nd0D" title="Creator of Kuroco service">Creator of Kuroco service</small><div class="authorSocials_rSDt"></div></div></div></div></div></header><div id="__blog-post-container" class="markdown"><p>A brief introduction to Headless CMS</p> 113<img decoding="async" loading="lazy" src="/files/user/img/blog/Kuroco_Headless_Overview.svg" alt="Kuroco Headless Overview" class="img_ev3q"> 114<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="what-is-a-headless-cms">What is a Headless CMS?<a href="#what-is-a-headless-cms" class="hash-l
114ink" aria-label="Direct link to What is a Headless CMS?" title="Direct link to What is a Headless CMS?" translate="no">â</a></h2> 115<p>A content management system (CMS) is a type of software tool that allows non-technical users to easily create and manage the content of their website or application, stored as data on a backend content repository (database).</p> 116<p>A 'headless' CMS provides the same functionality as a traditional CMS, while decoupling the backend data from the frontend, and exposing it via 'application programing interfaces' (APIs). These APIs are typically RESTful or GraphQL, and can be consumed by any frontend on any device.</p> 117<p>In other words, the concept of a CMS being âheadlessâ comes from separating or decoupling the frontend code ("head) from the backend code ("body"). In traditional CMSs the frontend and backend code are usually coupled; with a "headless" CMS any frontend can be used for presenting the content/data from the backend.</p> 118<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="headless-cms-vs-traditional-coupled-cms">Headless CMS vs Traditional (âCoupledâ) CMS<a href="#headless-cms-vs-traditional-coupled-cms" class="hash-link" aria-label="Direct link to Headless CMS vs Traditional (âCoupledâ) CMS" title="Direct link to Headless CMS vs Traditional (âCoupledâ) CMS" translate="no">â</a></h2> 119<p>Since a headless CMS is able to serve decoupled API data, this content can be easily consumed on any browser type on virtually any device, making it suitable for omnichannel websites and applications.</p> 120<p>In traditional CMSs (in use for decades), the backend data is tightly coupled with the HTML code that is served to the frontend layer. This makes it very difficult to use the data outside of the templates custom built for that CMS.</p> 121<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="features-of-a-traditional-cms">Features of a traditional CMS:<a href="#features-of-a-traditional-cms" class="hash-link" aria-label="Direct link to Features of a traditional CMS:" title="Direct link to Features of a traditional CMS:" translate="no">â</a></h2> 122<ul> 123<li class="">Interface enabling users to create and edit read/write data (content).</li> 124<li class="">Database to store read/write data.</li> 125<li class="">Role based access control, typically with an admin panel to grant user permission for managing the content.</li> 126<li class="">Frontend presentation layer (i.e. the actual website that people can see), with the content data mixed into the code.</li> 127</ul> 128<p>In web development, the best known traditional CMS platforms include WordPress, Drupal, as well as low or no code website editor options like Wix and Squarespace. In each of these platforms, the frontend presentation layers are tightly coupled with the backend data, which cannot usually be exported to other channels outside the platform.</p> 129<p>While traditional CMSs worked well in the past, the near ubiquitous use of mobile and other smart devices, the rise of omnichannel marketing, and the shift toward more progressive frontend web frameworks (like React, Vue, and Angular) require a more flexible and performant approach for serving content data.</p> 130<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="when-should-you-consider-using-a-headless-cms">When Should You Consider Using a Headless CMS?<a href="#when-should-you-consider-using-a-headless-cms" class="hash-link" aria-label="Direct link to When Should You Consider Using a Headless CMS?" title="Direct link to When Should You Consider Using a Headless CMS?" translate="no">â</a></h2> 131<p>Any enterprise that wants to unlock the power of its data should consider using a headless CMS. Websites and applications built on legacy technology stacks may have a lot of data stored in a database, but if this data is only used for a single frontend view (ex. desktop web browser), it is not being used to its full potential.</p> 132<p>In particular, if your companyâs frontend developers are responsible for building modern UI/UX views that work not only on desktop web browsers, but also on mobile and other devices, they will need access to this data in the form of a modern API.</p> 133<p>In order to avoid disruptions for the content creators and marketers on other teams, this data should also be manageable in a non-technical content management interface - which is where a headless CMS comes into play.</p> 134<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="how-a-headless-cms-can-increase-your-digital-agility">How a Headless CMS can Increase Your Digital Agility<a href="#how-a-headless-cms-can-increase-your-digital-agility" class="hash-l
134ink" aria-label="Direct link to How a Headless CMS can Increase Your Digital Agility" title="Direct link to How a Headless CMS can Increase Your Digital Agility" translate="no">â</a></h2> 135<p>Digital agility is the ability of organizations to rapidly develop, test, and ship new systems and processes.</p> 136<p>In the case of an enterprise website or application, there are usually multiple teams working on projects with many dependencies.</p> 137<p>For example, many modern frontend websites and applications are now built with next-generation JavaScript frameworks like React and Vue. Frontend teams need to iterate rapidly to build UI/UX designs that meet user needs. If the frontend and backend data are tightly coupled, then any data changes requested from the frontend team could result in breaking changes on the backend.</p> 138<p>Backend teams are generally more concerned with reliability, security, and overall performance. If they have to work closely with frontend teams to ensure that tightly coupled data is being served to meet the frontend's needs, this can result in long and costly delays in development.</p> 139<p>A decoupled API solves this problem - ensuring that frontend teams can consume the data without having to change any of the backend code. This separation of concerns greatly increases productivity, leading to far fewer bugs during development and faster time to launch.</p> 140<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="technology-agnostic-frontends">Technology Agnostic Frontends<a href="#technology-agnostic-frontends" class="hash-link" aria-label="Direct link to Technology Agnostic Frontends" title="Direct link to Technology Agnostic Frontends" translate="no">â</a></h3> 141<p>Frontend developers can also choose any technology they want to work with, without having to worry about any framework bugs that might crop up in stacks used by other frontend teams. For example, one team might be using a React Native library for a mobile app, and another might be using a static site generator for a desktop site - both consuming the same data from the backend API, but without any conflicting dependencies.</p> 142<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="the-rise-of-jamstack-sites">The Rise of Jamstack Sites<a href="#the-rise-of-jamstack-sites" class="hash-link" aria-label="Direct link to The Rise of Jamstack Sites" title="Direct link to The Rise of Jamstack Sites" translate="no">â</a></h3> 143<p>Often the newer progressive Javascrip frameworks (React, Vue, etc.) are used to build Jamstack websites. The advantage to this method is improved performance (esp. page loading speed) and better security compared to sites built on traditional coupled CMSs.</p> 144<p>For more information on Jamstack, check out this <a class="" href="/blog/jamstack/">related article</a>.</p> 145<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="how-should-you-host-your-headless-cms">How Should You Host Your Headless CMS?<a href="#how-should-you-host-your-headless-cms" class="hash-link" aria-label="Direct link to How Should You Host Your Headless CMS?" title="Direct link to How Should You Host Your Headless CMS?" translate="no">â</a></h2> 146<p>There are various options for hosting a headless CMS. Open source options are available, but will require backend developers to manage the hosting and maintenance on your internal systems (or cloud infrastructure that you pay for). Alternatively, services that offer paid backend cloud hosting are available (usually at a low cost)</p> 147<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="kuroco-headless-cms">Kuroco Headless CMS<a href="#kuroco-headless-cms" class="hash-link" aria-label="Direct link to Kuroco Headless CMS" title="Direct link to Kuroco Headless CMS" translate="no">â</a></h2> 148<p>Kuroco is a heavily API-focused headless CMS that makes it easy to configure endpoints for different frontends. This flexibility makes our platform's API management a similar solution to the <a class="" href="/blog/what-is-the-backend-to-frontend-design-pattern/">'backend-for-frontend' (BFF)</a> model, enabling more granular queries for different frontends.</p> 149<p>For more information on Kuroco, and how it can be a great fit for your online business, check out our comprehensive <a href="https://kuroco.app/docs/" target="_blank" rel="noopener noreferrer" class="">documentation site</a>.</p> 150<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="common-headless-cms-use-cases">Common Headless CMS Use Cases<a href="#common-headless-cms-use-cases" class="hash-l
150ink" aria-label="Direct link to Common Headless CMS Use Cases" title="Direct link to Common Headless CMS Use Cases" translate="no">â</a></h2> 151<ul> 152<li class=""><strong>Progressive Web Apps:</strong> Built with next-generation Javascript libraries like React/Next.js, Vue/Nuxt.js, Angular, etc.</li> 153<li class=""><strong>Native Mobile Apps:</strong> Native apps built for iOS (Swift), Android (Java), and/or Windows Phone (C#)</li> 154<li class=""><strong>E-commerce:</strong> Simplified content creation on websites built with popular e-commerce backends like Shopify, Magento, Bigcommerce, or Jamstack solutions like Snipcart.</li> 155<li class=""><strong>Static Site Generators:</strong> Manage content on popular SSG frameworks like Jekyll, Hugo, Gatsby, and Gridsome</li> 156<li class=""><strong>Overall API Management:</strong> While not all headless CMSs have advanced API customization functionality built-in, platforms like <a href="https://kuroco.app/" target="_blank" rel="noopener noreferrer" class="">Kuroco</a> can make this process a breeze.</li> 157</ul> 158<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="summary">Summary<a href="#summary" class="hash-link" aria-label="Direct link to Summary" title="Direct link to Summary" translate="no">â</a></h2> 159<p>While different companies have different needs and use cases for various CMS options available on the market today, the overall trend continues toward the 'headless' approach. The advantages of decoupling your data from a single frontend view, and opening it up to be more securely used by any number of independent frontends are simply undeniable.</p> 160<p>You can greatly increase your business's productivity, free up you frontend team to more rapidly build and test their UI/UX designs, and make it easy for non-technical content creators and marketers to manage their content.</p> 161<p>We hope you will give Kuroco a try - particularly if your business is focused on having a future-proof API management strategy. You can <a href="https://kuroco.app/free_trial/" target="_blank" rel="noopener noreferrer" class="">get started today</a> and test it out for free, or feel free to check out our site to learn more information!</p> 162<img decoding="async" loading="lazy" src="/files/user/img/blog/Kuroco_Headless_CMS.svg" alt="Kuroco Headless CMS" class="img_ev3q"> 163<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="related-articles">Related Articles<a href="#related-articles" class="hash-link" aria-label="Direct link to Related Articles" title="Direct link to Related Articles" translate="no">â</a></h2> 164<ul> 165<li class=""><a class="" href="/blog/guide-to-choosing-an-enterprise-headless-cms/">A Guide to Choosing an Enterprise Headless CMS</a></li> 166<li class=""><a class="" href="/blog/git-based-vs-api-centric-headless-cms/">Git-based Vs API-centric Headless CMS</a></li> 167<li class=""><a class="" href="/blog/what-are-the-benefits-of-a-headless-cms/">What Are the Benefits of a Headless CMS?</a></li> 168<li class=""><a class="" href="/blog/why-is-a-headless-cms-important-for-enterprises/">Why is a Headless CMS Important for Enterprises?</a></li> 169</ul></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Blog post page navigation"><a class="pagination-nav__link pagination-nav__link--prev" href="/blog/headless-cms-for-jamstack/"><div class="pagination-nav__sublabel">Newer post</div><div class="pagination-nav__label">Headless CMS for Jamstack</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/blog/jamstack-and-serverless/"><div class="pagination-nav__sublabel">Older post</div><div class="pagination-nav__label">Jamstack and Serverless</div></a></nav></main><div class="col col--2"><div class="tableOfContents_bqdL thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#what-is-a-headless-cms" class="table-of-contents__link toc-highlight">What is a Headless CMS?</a></li><li><a href="#headless-cms-vs-traditional-coupled-cms" class="table-of-contents__link toc-highlight">Headless CMS vs Traditional (âCoupledâ) CMS</a></li><li><a href="#features-of-a-traditional-cms" class="table-of-contents__link toc-highlight">Features of a traditional CMS:</a></li><li><a href="#when-should-you-consider-using-a-headless-cms" class="table-of-contents__link toc-highlight">When Should You Consider Using a Headless CMS?</a></li><li><a href="#how-a-headless-cms-can-increase-your-digital-agility" class="table-of-contents__link toc-highlight">How a Headless CMS can Increase Your Digital Agility</a><ul><li><a href="#technology-agnostic-frontends" class="table-of-contents__link toc-highlight">Technology Agnostic Frontends</a></li><li><a href="#the-rise-of-jamstack-sites" class="table-of-contents__link toc-highlight">The Rise of Jamstack Sites</a></li></ul></li><li><a href="#how-should-you-host-your-headless-cms" class="table-of-contents__link toc-highlight">How Should You Host Your Headless CMS?</a></li><li><a href="#kuroco-headless-cms" class="table-of-contents__link toc-highlight">Kuroco Headless CMS</a></li><li><a href="#common-headless-cms-use-cases" class="table-of-contents__link toc-highlight">Common Headless CMS Use Cases</a></li><li><a href="#summary" class="table-of-contents__link toc-highlight">Summary</a></li><li><a href="#related-articles" class="table-of-contents__link toc-highlight">Related Articles</a></li></ul></div></div></div></div></div><div data-rht-toaster="" style="position:fixed;z-index:9999;top:16px;left:16px;right:16px;bottom:16px;pointer-events:none"></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links">
169<div class="theme-layout-footer-column col footer__col"><div class="footer__title">SITEMAP</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/quick-guide/">Quick Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/about/about-kuroco/">About Kuroco</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/about/what-is-a-headless-cms/">What is a Headless CMS?</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/management/dashboard/">Admin Manual</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/about/support/">Support</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq/">FAQ</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/update/kuroco-roadmap/">Releases</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/about/sales/">Materials</a></li><li class="footer__item"><a href="https://kuroco.statuspal.io" target="_blank" rel="noopener noreferrer" class="footer__link-item">Status<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">COMPANY</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://kuroco.zendesk.com/hc/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contact us<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://kuroco.app/files/legal/Kuroco-terms-of-service.pdf" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms & conditions<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://www.diverta.co.jp/en/privacy/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2024 Diverta Inc. All rights reserved.</div></div></div></footer></div></body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.