[{"data":1,"prerenderedAt":243},["ShallowReactive",2],{"term-i\u002Fisr":3,"related-i\u002Fisr":219},{"id":4,"title":5,"acronym":6,"body":7,"category":197,"description":198,"difficulty":199,"extension":200,"letter":201,"meta":202,"navigation":203,"path":204,"related":205,"seo":212,"sitemap":213,"stem":216,"subcategory":217,"__hash__":218},"terms\u002Fterms\u002Fi\u002Fisr.md","ISR","Incremental Static Regeneration",{"type":8,"value":9,"toc":191},"minimark",[10,15,19,23,26,30,180,184,187],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"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. Stale pages get regenerated when someone visits, so you get fast static speed without rebuilding the whole site for every content change.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"ISR is a Next.js (and now Nuxt) feature that allows statically generated pages to be re-validated and regenerated after a configurable interval, without a full site rebuild. The first visitor after the revalidation window triggers a background regeneration while still being served the old cached page.",[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 Next.js ISR — rebuild this page at most every 60 seconds\nexport async function getStaticProps() {\n  const data = await fetch('https:\u002F\u002Fapi.example.com\u002Fposts');\n  return {\n    props: { posts: await data.json() },\n    revalidate: 60,\n  };\n}\n","javascript","",[38,39,40,49,74,112,120,153,168,174],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Next.js ISR — rebuild this page at most every 60 seconds\n",[41,50,52,56,60,63,67,71],{"class":43,"line":51},2,[41,53,55],{"class":54},"s7zQu","export",[41,57,59],{"class":58},"spNyl"," async",[41,61,62],{"class":58}," function",[41,64,66],{"class":65},"s2Zo4"," getStaticProps",[41,68,70],{"class":69},"sMK4o","()",[41,72,73],{"class":69}," {\n",[41,75,77,80,84,87,90,93,97,100,104,106,109],{"class":43,"line":76},3,[41,78,79],{"class":58},"  const",[41,81,83],{"class":82},"sTEyZ"," data",[41,85,86],{"class":69}," =",[41,88,89],{"class":54}," await",[41,91,92],{"class":65}," fetch",[41,94,96],{"class":95},"swJcz","(",[41,98,99],{"class":69},"'",[41,101,103],{"class":102},"sfazB","https:\u002F\u002Fapi.example.com\u002Fposts",[41,105,99],{"class":69},[41,107,108],{"class":95},")",[41,110,111],{"class":69},";\n",[41,113,115,118],{"class":43,"line":114},4,[41,116,117],{"class":54},"  return",[41,119,73],{"class":69},[41,121,123,126,129,132,135,137,139,141,144,147,150],{"class":43,"line":122},5,[41,124,125],{"class":95},"    props",[41,127,128],{"class":69},":",[41,130,131],{"class":69}," {",[41,133,134],{"class":95}," posts",[41,136,128],{"class":69},[41,138,89],{"class":54},[41,140,83],{"class":82},[41,142,143],{"class":69},".",[41,145,146],{"class":65},"json",[41,148,149],{"class":95},"() ",[41,151,152],{"class":69},"},\n",[41,154,156,159,161,165],{"class":43,"line":155},6,[41,157,158],{"class":95},"    revalidate",[41,160,128],{"class":69},[41,162,164],{"class":163},"sbssI"," 60",[41,166,167],{"class":69},",\n",[41,169,171],{"class":43,"line":170},7,[41,172,173],{"class":69},"  };\n",[41,175,177],{"class":43,"line":176},8,[41,178,179],{"class":69},"}\n",[11,181,183],{"id":182},"when-youll-hear-this","When You'll Hear This",[16,185,186],{},"\"Use ISR for product pages — they're mostly static but update occasionally.\" \u002F \"ISR is only properly supported in Next.js with Vercel or self-hosted infra.\"",[188,189,190],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":192},[193,194,195,196],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":182,"depth":51,"text":183},"frontend","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.","advanced","md","i",{},true,"\u002Fterms\u002Fi\u002Fisr",[206,207,208,209,210,211],"SSG","SSR","CSR","Next.js","Nuxt","Hydration",{"title":5,"description":198},{"changefreq":214,"priority":215},"weekly",0.7,"terms\u002Fi\u002Fisr",null,"ezWjvM6BdWPKQuOCMTHOiO0cjbPKNTDOnLiUsBuo4N0",[220,225,229,232,235,239],{"title":208,"path":221,"acronym":222,"category":197,"difficulty":223,"description":224},"\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":211,"path":226,"acronym":217,"category":197,"difficulty":227,"description":228},"\u002Fterms\u002Fh\u002Fhydration","intermediate","Hydration is when a server-rendered HTML page comes alive in the browser.",{"title":209,"path":230,"acronym":217,"category":197,"difficulty":227,"description":231},"\u002Fterms\u002Fn\u002Fnext-js","Next.js is React's big sibling that adds superpowers like SSR, SSG, file-based routing, and API routes.",{"title":210,"path":233,"acronym":217,"category":197,"difficulty":227,"description":234},"\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":206,"path":236,"acronym":237,"category":197,"difficulty":227,"description":238},"\u002Fterms\u002Fs\u002Fssg","Static Site Generation","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.",{"title":207,"path":240,"acronym":241,"category":197,"difficulty":227,"description":242},"\u002Fterms\u002Fs\u002Fssr","Server-Side Rendering","SSR means the server builds your HTML before sending it to the user's browser.",1776518288015]