[{"data":1,"prerenderedAt":295},["ShallowReactive",2],{"term-j\u002Fjamstack":3,"related-j\u002Fjamstack":273},{"id":4,"title":5,"acronym":6,"body":7,"category":252,"description":253,"difficulty":254,"extension":255,"letter":256,"meta":257,"navigation":180,"path":258,"related":259,"seo":267,"sitemap":268,"stem":271,"subcategory":6,"__hash__":272},"terms\u002Fterms\u002Fj\u002Fjamstack.md","JAMstack",null,{"type":8,"value":9,"toc":246},"minimark",[10,15,19,23,26,30,235,239,242],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"JAMstack stands for JavaScript, APIs, Markup. It's a way of building websites where the HTML is pre-generated at build time (markup), dynamic stuff is done client-side with JavaScript, and backend features come from third-party APIs. Your site is just files on a CDN — crazy fast and nearly impossible to hack.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"JAMstack is a web architecture pattern where the frontend is pre-built static markup served from a CDN, with dynamic functionality delivered through client-side JavaScript and third-party APIs. Eliminates server-side rendering per request. Enables global distribution, high performance, and simplified scaling. Popularized by Netlify and Vercel.",[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 JAMstack: static page + client-side API call\n\u002F\u002F HTML generated at build time (Astro, Next.js, Nuxt)\nexport async function getStaticProps() {\n  const posts = await fetch('https:\u002F\u002Fapi.example.com\u002Fposts').then(r => r.json());\n  return { props: { posts } };\n}\n\n\u002F\u002F Dynamic data fetched client-side at runtime\nconst comments = await fetch('\u002Fapi\u002Fcomments?postId=1').then(r => r.json());\n","javascript","",[38,39,40,49,55,80,144,169,175,182,188],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F JAMstack: static page + client-side API call\n",[41,50,52],{"class":43,"line":51},2,[41,53,54],{"class":47},"\u002F\u002F HTML generated at build time (Astro, Next.js, Nuxt)\n",[41,56,58,62,66,69,73,77],{"class":43,"line":57},3,[41,59,61],{"class":60},"s7zQu","export",[41,63,65],{"class":64},"spNyl"," async",[41,67,68],{"class":64}," function",[41,70,72],{"class":71},"s2Zo4"," getStaticProps",[41,74,76],{"class":75},"sMK4o","()",[41,78,79],{"class":75}," {\n",[41,81,83,86,90,93,96,99,103,106,110,112,115,118,121,123,127,130,133,135,138,141],{"class":43,"line":82},4,[41,84,85],{"class":64},"  const",[41,87,89],{"class":88},"sTEyZ"," posts",[41,91,92],{"class":75}," =",[41,94,95],{"class":60}," await",[41,97,98],{"class":71}," fetch",[41,100,102],{"class":101},"swJcz","(",[41,104,105],{"class":75},"'",[41,107,109],{"class":108},"sfazB","https:\u002F\u002Fapi.example.com\u002Fposts",[41,111,105],{"class":75},[41,113,114],{"class":101},")",[41,116,117],{"class":75},".",[41,119,120],{"class":71},"then",[41,122,102],{"class":101},[41,124,126],{"class":125},"sHdIc","r",[41,128,129],{"class":64}," =>",[41,131,132],{"class":88}," r",[41,134,117],{"class":75},[41,136,137],{"class":71},"json",[41,139,140],{"class":101},"())",[41,142,143],{"class":75},";\n",[41,145,147,150,153,156,159,161,163,166],{"class":43,"line":146},5,[41,148,149],{"class":60},"  return",[41,151,152],{"class":75}," {",[41,154,155],{"class":101}," props",[41,157,158],{"class":75},":",[41,160,152],{"class":75},[41,162,89],{"class":88},[41,164,165],{"class":75}," }",[41,167,168],{"class":75}," };\n",[41,170,172],{"class":43,"line":171},6,[41,173,174],{"class":75},"}\n",[41,176,178],{"class":43,"line":177},7,[41,179,181],{"emptyLinePlaceholder":180},true,"\n",[41,183,185],{"class":43,"line":184},8,[41,186,187],{"class":47},"\u002F\u002F Dynamic data fetched client-side at runtime\n",[41,189,191,194,197,200,202,204,206,208,211,213,215,217,219,221,223,225,227,229,231,233],{"class":43,"line":190},9,[41,192,193],{"class":64},"const",[41,195,196],{"class":88}," comments ",[41,198,199],{"class":75},"=",[41,201,95],{"class":60},[41,203,98],{"class":71},[41,205,102],{"class":88},[41,207,105],{"class":75},[41,209,210],{"class":108},"\u002Fapi\u002Fcomments?postId=1",[41,212,105],{"class":75},[41,214,114],{"class":88},[41,216,117],{"class":75},[41,218,120],{"class":71},[41,220,102],{"class":88},[41,222,126],{"class":125},[41,224,129],{"class":64},[41,226,132],{"class":88},[41,228,117],{"class":75},[41,230,137],{"class":71},[41,232,140],{"class":88},[41,234,143],{"class":75},[11,236,238],{"id":237},"when-youll-hear-this","When You'll Hear This",[16,240,241],{},"\"We rebuilt the blog as JAMstack — loads in 200ms now.\" \u002F \"JAMstack makes scaling easy since it's just static files on a CDN.\"",[243,244,245],"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 .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 .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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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":247},[248,249,250,251],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":237,"depth":51,"text":238},"cloud","JAMstack stands for JavaScript, APIs, Markup.","beginner","md","j",{},"\u002Fterms\u002Fj\u002Fjamstack",[260,261,262,263,264,265,266],"Static Hosting","CDN","Serverless","API Gateway","Vercel","Netlify","Headless CMS",{"title":5,"description":253},{"changefreq":269,"priority":270},"weekly",0.7,"terms\u002Fj\u002Fjamstack","oCthyAmdUEubUmzn1XBr4DTs_fE8waigPsT8YidjI40",[274,279,283,286,289,292],{"title":263,"path":275,"acronym":6,"category":276,"difficulty":277,"description":278},"\u002Fterms\u002Fa\u002Fapi-gateway","networking","intermediate","An API Gateway is the front door for all your APIs.",{"title":261,"path":280,"acronym":281,"category":252,"difficulty":254,"description":282},"\u002Fterms\u002Fc\u002Fcdn","Content Delivery Network","A CDN is a network of servers spread around the world that store copies of your files.",{"title":266,"path":284,"acronym":6,"category":252,"difficulty":254,"description":285},"\u002Fterms\u002Fh\u002Fheadless-cms","A headless CMS stores your content and gives it to you via API — but doesn't control how it looks.",{"title":265,"path":287,"acronym":6,"category":252,"difficulty":254,"description":288},"\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":262,"path":290,"acronym":6,"category":252,"difficulty":254,"description":291},"\u002Fterms\u002Fs\u002Fserverless","Serverless doesn't mean there are no servers — it means YOU don't have to think about servers. Someone else manages them, scales them, and patches them.",{"title":260,"path":293,"acronym":6,"category":252,"difficulty":254,"description":294},"\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.",1776518289600]