[{"data":1,"prerenderedAt":185},["ShallowReactive",2],{"blog-de-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\u002Fde\u002Fnextjs-incremental-static-regeneration.md","Incremental Static Regeneration: das Beste aus beiden Welten",{"type":7,"value":8,"toc":164},"minimark",[9,13,18,21,119,126,137,141,144,147,151,157,160],[10,11,12],"p",{},"Lange Zeit musste ich mich entscheiden: statisch oder dynamisch. Statische Seiten sind\nblitzschnell, aber bei jeder Inhaltsänderung muss die ganze Seite neu gebaut werden.\nDynamische Seiten sind frisch, aber jeder Aufruf kostet Rechenzeit auf dem Server. Mit\nNext.js 9.5 ist diese Entscheidung im Sommer 2020 endlich vom Tisch.",[14,15,17],"h2",{"id":16},"was-isr-eigentlich-tut","Was ISR eigentlich tut",[10,19,20],{},"Incremental Static Regeneration baut eine Seite einmal statisch und liefert sie aus dem\nCache aus — schnell wie eine reine HTML-Datei. Der Clou: Nach einem festgelegten Intervall\nbaut Next.js die Seite im Hintergrund neu, sobald wieder jemand sie aufruft. Die ersten\nBesucher:innen sehen noch die alte Version, alle danach die frische.",[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 höchstens alle 60 Sekunden neu bauen\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 höchstens alle 60 Sekunden neu bauen\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],{},"Diese eine Zeile, ",[29,123,124],{},"revalidate",", ist der ganze Zauber. Du musst nicht mehr die komplette\nSeite neu deployen, nur weil sich ein Blogeintrag geändert hat.",[127,128,129],"blockquote",{},[10,130,131,132,136],{},"Schnell ",[133,134,135],"em",{},"und"," aktuell war früher ein Widerspruch. ISR macht daraus eine Konfiguration.",[14,138,140],{"id":139},"warum-mich-das-überzeugt","Warum mich das überzeugt",[10,142,143],{},"Ich baue viel für Ateliers, kleine Studios und Portfolios — Seiten, die selten, aber doch\nregelmäßig aktualisiert werden. Bisher hieß das: bei jeder Änderung ein voller Rebuild, der\nbei vielen Seiten Minuten dauern kann. Mit ISR aktualisiert sich nur die betroffene Seite,\nund das ohne, dass ich überhaupt etwas anstoße.",[10,145,146],{},"Für die Besucher:innen bedeutet das Ladezeiten wie bei einer reinen Static Site, für meine\nKund:innen bedeutet es, dass ihre Inhalte ohne technische Hürde aktuell bleiben. Niemand\nmuss auf einen Deploy warten.",[14,148,150],{"id":149},"worauf-ich-achte","Worauf ich achte",[10,152,153,154,156],{},"ISR ist kein Allheilmittel. Für hochdynamische Daten — Warenkörbe, Live-Preise — bleibt\nserverseitiges Rendern die bessere Wahl. Und das ",[29,155,124],{},"-Intervall will mit Bedacht\ngewählt sein: zu kurz, und du verschenkst den Cache-Vorteil; zu lang, und die Inhalte\nfühlen sich abgestanden an.",[10,158,159],{},"Für die allermeisten Content-Seiten aber hat ISR meine Standardarchitektur verändert. Es\nist eine dieser seltenen Funktionen, die ein altes Dilemma nicht umgeht, sondern auflöst —\nund das ist für mich die eleganteste Form von Fortschritt.",[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 brachte ISR — statische Geschwindigkeit mit frischen Inhalten. Warum das verändert hat, wie ich Content-Seiten ausliefere.",false,"md","de",{},true,"\u002Fblog\u002Fde\u002Fnextjs-incremental-static-regeneration",{"title":5,"description":171},"blog\u002Fde\u002Fnextjs-incremental-static-regeneration",[181,182,183],"Next.js","Performance","Web","2KE-O3F-jgZoIJl2rdMM7L44N7R7Yomos_O7ayI9ZMo",1781691286912]