[{"data":1,"prerenderedAt":274},["ShallowReactive",2],{"term-h\u002Fheadless-cms":3,"related-h\u002Fheadless-cms":252},{"id":4,"title":5,"acronym":6,"body":7,"category":231,"description":232,"difficulty":233,"extension":234,"letter":235,"meta":236,"navigation":157,"path":237,"related":238,"seo":246,"sitemap":247,"stem":250,"subcategory":6,"__hash__":251},"terms\u002Fterms\u002Fh\u002Fheadless-cms.md","Headless CMS",null,{"type":8,"value":9,"toc":225},"minimark",[10,15,19,23,26,30,214,218,221],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"A headless CMS stores your content and gives it to you via API — but doesn't control how it looks. The 'head' (frontend\u002Fpresentation layer) is detached, so you can build any frontend you want and fetch content via API. Contentful, Sanity, and Strapi are popular ones. Perfect for JAMstack sites.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"A headless CMS is a content management system that decouples the content repository (backend) from the presentation layer (frontend). Content is stored and managed in the CMS and delivered via REST or GraphQL APIs to any frontend — websites, mobile apps, digital signage, etc. Enables omnichannel publishing and framework-agnostic frontends.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Fetch content from a headless CMS (Sanity)\nimport { createClient } from '@sanity\u002Fclient';\nconst client = createClient({ projectId: 'abc123', dataset: 'production', useCdn: true });\n\nconst posts = await client.fetch(`\n  *[_type == \"post\" && published == true] | order(publishedAt desc) {\n    title, slug, excerpt, publishedAt\n  }\n`);\n","javascript","",[38,39,40,49,83,152,159,186,192,198,204],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Fetch content from a headless CMS (Sanity)\n",[41,50,52,56,60,64,67,70,73,77,80],{"class":43,"line":51},2,[41,53,55],{"class":54},"s7zQu","import",[41,57,59],{"class":58},"sMK4o"," {",[41,61,63],{"class":62},"sTEyZ"," createClient",[41,65,66],{"class":58}," }",[41,68,69],{"class":54}," from",[41,71,72],{"class":58}," '",[41,74,76],{"class":75},"sfazB","@sanity\u002Fclient",[41,78,79],{"class":58},"'",[41,81,82],{"class":58},";\n",[41,84,86,90,93,96,99,102,105,109,112,114,117,119,122,125,127,129,132,134,136,139,141,145,147,150],{"class":43,"line":85},3,[41,87,89],{"class":88},"spNyl","const",[41,91,92],{"class":62}," client ",[41,94,95],{"class":58},"=",[41,97,63],{"class":98},"s2Zo4",[41,100,101],{"class":62},"(",[41,103,104],{"class":58},"{",[41,106,108],{"class":107},"swJcz"," projectId",[41,110,111],{"class":58},":",[41,113,72],{"class":58},[41,115,116],{"class":75},"abc123",[41,118,79],{"class":58},[41,120,121],{"class":58},",",[41,123,124],{"class":107}," dataset",[41,126,111],{"class":58},[41,128,72],{"class":58},[41,130,131],{"class":75},"production",[41,133,79],{"class":58},[41,135,121],{"class":58},[41,137,138],{"class":107}," useCdn",[41,140,111],{"class":58},[41,142,144],{"class":143},"sfNiH"," true",[41,146,66],{"class":58},[41,148,149],{"class":62},")",[41,151,82],{"class":58},[41,153,155],{"class":43,"line":154},4,[41,156,158],{"emptyLinePlaceholder":157},true,"\n",[41,160,162,164,167,169,172,175,178,181,183],{"class":43,"line":161},5,[41,163,89],{"class":88},[41,165,166],{"class":62}," posts ",[41,168,95],{"class":58},[41,170,171],{"class":54}," await",[41,173,174],{"class":62}," client",[41,176,177],{"class":58},".",[41,179,180],{"class":98},"fetch",[41,182,101],{"class":62},[41,184,185],{"class":58},"`\n",[41,187,189],{"class":43,"line":188},6,[41,190,191],{"class":75},"  *[_type == \"post\" && published == true] | order(publishedAt desc) {\n",[41,193,195],{"class":43,"line":194},7,[41,196,197],{"class":75},"    title, slug, excerpt, publishedAt\n",[41,199,201],{"class":43,"line":200},8,[41,202,203],{"class":75},"  }\n",[41,205,207,210,212],{"class":43,"line":206},9,[41,208,209],{"class":58},"`",[41,211,149],{"class":62},[41,213,82],{"class":58},[11,215,217],{"id":216},"when-youll-hear-this","When You'll Hear This",[16,219,220],{},"\"The marketing team edits content in the headless CMS and it auto-deploys to the site.\" \u002F \"A headless CMS gives content editors a nice UI while we use any frontend framework.\"",[222,223,224],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":226},[227,228,229,230],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":216,"depth":51,"text":217},"cloud","A headless CMS stores your content and gives it to you via API — but doesn't control how it looks.","beginner","md","h",{},"\u002Fterms\u002Fh\u002Fheadless-cms",[239,240,241,242,243,244,245],"JAMstack","Static Hosting","API Gateway","Vercel","Netlify","REST API","GraphQL",{"title":5,"description":232},{"changefreq":248,"priority":249},"weekly",0.7,"terms\u002Fh\u002Fheadless-cms","2yXxbTq9gCqz6nS1UMMOtINrUWJL-_I0F5HXGbT9kfg",[253,258,262,265,268,271],{"title":241,"path":254,"acronym":6,"category":255,"difficulty":256,"description":257},"\u002Fterms\u002Fa\u002Fapi-gateway","networking","intermediate","An API Gateway is the front door for all your APIs.",{"title":245,"path":259,"acronym":6,"category":260,"difficulty":256,"description":261},"\u002Fterms\u002Fg\u002Fgraphql","backend","GraphQL is like ordering food where YOU specify exactly what you want on your plate.",{"title":239,"path":263,"acronym":6,"category":231,"difficulty":233,"description":264},"\u002Fterms\u002Fj\u002Fjamstack","JAMstack stands for JavaScript, APIs, Markup.",{"title":243,"path":266,"acronym":6,"category":231,"difficulty":233,"description":267},"\u002Fterms\u002Fn\u002Fnetlify","Netlify is like Vercel's cooler older sibling that was doing the automatic-deploy-from-GitHub thing before it was cool.",{"title":240,"path":269,"acronym":6,"category":231,"difficulty":233,"description":270},"\u002Fterms\u002Fs\u002Fstatic-hosting","Static hosting is when you serve pre-built HTML, CSS, and JavaScript files directly — no server-side logic, no database queries per request.",{"title":242,"path":272,"acronym":6,"category":231,"difficulty":233,"description":273},"\u002Fterms\u002Fv\u002Fvercel","Vercel is the magic platform that takes your frontend code and puts it on the internet in like 30 seconds.",1776518286634]