[{"data":1,"prerenderedAt":188},["ShallowReactive",2],{"term-s\u002Fssg":3,"related-s\u002Fssg":164},{"id":4,"title":5,"acronym":6,"body":7,"category":141,"description":142,"difficulty":143,"extension":144,"letter":145,"meta":146,"navigation":147,"path":148,"related":149,"seo":157,"sitemap":158,"stem":161,"subcategory":162,"__hash__":163},"terms\u002Fterms\u002Fs\u002Fssg.md","SSG","Static Site Generation",{"type":8,"value":9,"toc":135},"minimark",[10,15,19,23,26,30,124,128,131],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"SSG builds all your pages ahead of time — before anyone visits. You get a folder of plain HTML files that are blazing fast to serve from a CDN. The downside: you have to rebuild whenever content changes. Perfect for blogs, docs, and marketing sites.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"SSG pre-renders pages at build time, producing static HTML, CSS, and JS files that can be deployed to a CDN. Because there's no server processing per request, it's extremely fast and cheap to host. Best for content that doesn't change per user or very frequently.",[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-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Nuxt SSG — nuxt generate\n\u002F\u002F Builds every page to static HTML at build time\n\u002F\u002F Deploy the output\u002F folder to any static host\n","bash","",[38,39,40,65,97],"code",{"__ignoreMap":36},[41,42,45,49,53,56,59,62],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sBMFI","\u002F\u002F",[41,50,52],{"class":51},"sfazB"," Nuxt",[41,54,55],{"class":51}," SSG",[41,57,58],{"class":51}," —",[41,60,61],{"class":51}," nuxt",[41,63,64],{"class":51}," generate\n",[41,66,68,70,73,76,79,82,85,88,91,94],{"class":43,"line":67},2,[41,69,48],{"class":47},[41,71,72],{"class":51}," Builds",[41,74,75],{"class":51}," every",[41,77,78],{"class":51}," page",[41,80,81],{"class":51}," to",[41,83,84],{"class":51}," static",[41,86,87],{"class":51}," HTML",[41,89,90],{"class":51}," at",[41,92,93],{"class":51}," build",[41,95,96],{"class":51}," time\n",[41,98,100,102,105,108,111,114,116,119,121],{"class":43,"line":99},3,[41,101,48],{"class":47},[41,103,104],{"class":51}," Deploy",[41,106,107],{"class":51}," the",[41,109,110],{"class":51}," output\u002F",[41,112,113],{"class":51}," folder",[41,115,81],{"class":51},[41,117,118],{"class":51}," any",[41,120,84],{"class":51},[41,122,123],{"class":51}," host\n",[11,125,127],{"id":126},"when-youll-hear-this","When You'll Hear This",[16,129,130],{},"\"Our marketing site uses SSG — it deploys to Vercel as static files.\" \u002F \"SSG can't show personalized content without client-side fetching.\"",[132,133,134],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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":67,"depth":67,"links":136},[137,138,139,140],{"id":13,"depth":67,"text":14},{"id":21,"depth":67,"text":22},{"id":28,"depth":67,"text":29},{"id":126,"depth":67,"text":127},"frontend","SSG builds all your pages ahead of time — before anyone visits. You get a folder of plain HTML files that are blazing fast to serve from a CDN.","intermediate","md","s",{},true,"\u002Fterms\u002Fs\u002Fssg",[150,151,152,153,154,155,156],"SSR","ISR","CSR","SPA","Nuxt","Next.js","Hydration",{"title":5,"description":142},{"changefreq":159,"priority":160},"weekly",0.7,"terms\u002Fs\u002Fssg",null,"W2XNvM_S6sQGAHDQtHynzq3Ce7evYiuj5t6cx0FSr-U",[165,170,173,178,181,184],{"title":152,"path":166,"acronym":167,"category":141,"difficulty":168,"description":169},"\u002Fterms\u002Fc\u002Fcsr","Client-Side Rendering","beginner","CSR means the browser downloads a mostly-empty HTML page plus a big JavaScript bundle, then builds the full page in the browser.",{"title":156,"path":171,"acronym":162,"category":141,"difficulty":143,"description":172},"\u002Fterms\u002Fh\u002Fhydration","Hydration is when a server-rendered HTML page comes alive in the browser.",{"title":151,"path":174,"acronym":175,"category":141,"difficulty":176,"description":177},"\u002Fterms\u002Fi\u002Fisr","Incremental Static Regeneration","advanced","ISR is the best of both SSG and SSR. Pages are pre-built statically but can automatically rebuild themselves in the background after a set time.",{"title":155,"path":179,"acronym":162,"category":141,"difficulty":143,"description":180},"\u002Fterms\u002Fn\u002Fnext-js","Next.js is React's big sibling that adds superpowers like SSR, SSG, file-based routing, and API routes.",{"title":154,"path":182,"acronym":162,"category":141,"difficulty":143,"description":183},"\u002Fterms\u002Fn\u002Fnuxt","Nuxt is Vue on steroids. It's a meta-framework that adds SSR, SSG, file-based routing, auto-imports, and a full deployment pipeline on top of Vue.",{"title":153,"path":185,"acronym":186,"category":141,"difficulty":168,"description":187},"\u002Fterms\u002Fs\u002Fspa","Single Page Application","A SPA is a website that loads ONE HTML page and then never does a full page reload again.",1776518310363]