[{"data":1,"prerenderedAt":185},["ShallowReactive",2],{"blog-en-nextjs-incremental-static-regeneration":3},{"id":4,"title":5,"body":6,"cover":169,"date":170,"description":171,"draft":172,"extension":173,"locale":174,"meta":175,"navigation":176,"path":177,"seo":178,"stem":179,"tags":180,"__hash__":184},"blog\u002Fblog\u002Fen\u002Fnextjs-incremental-static-regeneration.md","Incremental Static Regeneration: the best of both worlds",{"type":7,"value":8,"toc":164},"minimark",[9,13,18,21,119,126,137,141,144,147,151,157,160],[10,11,12],"p",{},"For a long time I had to choose: static or dynamic. Static pages are lightning fast, but\nevery content change means rebuilding the whole site. Dynamic pages stay fresh, but every\nrequest costs compute time on the server. With Next.js 9.5, in the summer of 2020, that\nchoice is finally off the table.",[14,15,17],"h2",{"id":16},"what-isr-actually-does","What ISR actually does",[10,19,20],{},"Incremental Static Regeneration builds a page once, statically, and serves it from cache —\nas fast as a plain HTML file. The clever part: after a set interval, Next.js rebuilds the\npage in the background as soon as someone requests it again. The first visitors still see the\nold version, everyone after sees the fresh one.",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-js shiki shiki-themes github-light github-dark","export async function getStaticProps() {\n  const posts = await fetchPosts();\n  return {\n    props: { posts },\n    revalidate: 60, \u002F\u002F rebuild at most every 60 seconds\n  };\n}\n","js","",[29,30,31,54,76,85,91,107,113],"code",{"__ignoreMap":27},[32,33,36,40,43,46,50],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"szBVR","export",[32,41,42],{"class":38}," async",[32,44,45],{"class":38}," function",[32,47,49],{"class":48},"sScJk"," getStaticProps",[32,51,53],{"class":52},"sVt8B","() {\n",[32,55,57,60,64,67,70,73],{"class":34,"line":56},2,[32,58,59],{"class":38},"  const",[32,61,63],{"class":62},"sj4cs"," posts",[32,65,66],{"class":38}," =",[32,68,69],{"class":38}," await",[32,71,72],{"class":48}," fetchPosts",[32,74,75],{"class":52},"();\n",[32,77,79,82],{"class":34,"line":78},3,[32,80,81],{"class":38},"  return",[32,83,84],{"class":52}," {\n",[32,86,88],{"class":34,"line":87},4,[32,89,90],{"class":52},"    props: { posts },\n",[32,92,94,97,100,103],{"class":34,"line":93},5,[32,95,96],{"class":52},"    revalidate: ",[32,98,99],{"class":62},"60",[32,101,102],{"class":52},", ",[32,104,106],{"class":105},"sJ8bj","\u002F\u002F rebuild at most every 60 seconds\n",[32,108,110],{"class":34,"line":109},6,[32,111,112],{"class":52},"  };\n",[32,114,116],{"class":34,"line":115},7,[32,117,118],{"class":52},"}\n",[10,120,121,122,125],{},"That single line, ",[29,123,124],{},"revalidate",", is the whole trick. You no longer have to redeploy the\nentire site just because one blog entry changed.",[127,128,129],"blockquote",{},[10,130,131,132,136],{},"Fast ",[133,134,135],"em",{},"and"," current used to be a contradiction. ISR turns it into a configuration value.",[14,138,140],{"id":139},"why-it-convinces-me","Why it convinces me",[10,142,143],{},"I build a lot for ateliers, small studios, and portfolios — sites that are updated rarely,\nbut still regularly. Until now that meant a full rebuild on every change, which can take\nminutes once there are many pages. With ISR, only the affected page refreshes, and without me\ntriggering anything at all.",[10,145,146],{},"For visitors this means load times like a pure static site; for my clients it means their\ncontent stays current without any technical hurdle. Nobody has to wait for a deploy.",[14,148,150],{"id":149},"what-i-watch-out-for","What I watch out for",[10,152,153,154,156],{},"ISR isn't a cure-all. For highly dynamic data — shopping carts, live prices — server-side\nrendering remains the better choice. And the ",[29,155,124],{}," interval wants to be chosen with\ncare: too short, and you give away the caching advantage; too long, and the content starts to\nfeel stale.",[10,158,159],{},"For the vast majority of content sites, though, ISR has changed my default architecture. It's\none of those rare features that doesn't work around an old dilemma but dissolves it — and to\nme, that's the most elegant kind of progress.",[161,162,163],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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":27,"searchDepth":56,"depth":56,"links":165},[166,167,168],{"id":16,"depth":56,"text":17},{"id":139,"depth":56,"text":140},{"id":149,"depth":56,"text":150},null,"2020-07-27","Next.js 9.5 introduced ISR — static speed with fresh content. Why it changed how I ship content sites for good.",false,"md","en",{},true,"\u002Fblog\u002Fen\u002Fnextjs-incremental-static-regeneration",{"title":5,"description":171},"blog\u002Fen\u002Fnextjs-incremental-static-regeneration",[181,182,183],"Next.js","Performance","Web","IIBqPSYu0UxOqYakO4kfKo8dzbP-e19ctpYT-1oaiJE",1781691288116]