Edit ISR

Name

Also known as (comma separated)

Brief definition Incremental Static Regeneration.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "pageTitle", "type": "text", "label": "Page", "default": "/blog/launch" }, { "id": "revalidateSeconds", "type": "number", "label": "Revalidate every (s)", "default": 60, "min": 5, "max": 600, "step": 5 }, { "id": "stage", "type": "select", "label": "Stage", "default": "stale", "options": [ "fresh", "stale", "regenerating" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"isr isr--{{stage}}\" role=\"img\" aria-label=\"{{pageTitle}}, {{stage}}, revalidate every {{revalidateSeconds}}s\">\n <p class=\"isr__title\">{{pageTitle}} <span class=\"isr__revalid\">revalidate: {{revalidateSeconds}}s</span></p>\n <div class=\"isr__served\" style=\"--a:{{accent}};\">Served from static HTML</div>\n <p class=\"isr__note isr__note--fresh\">Within the revalidate window &mdash; served as-is, no rebuild needed.</p>\n <p class=\"isr__note isr__note--stale\">Window expired &mdash; this stale copy is served <em>while</em> a rebuild is triggered.</p>\n <p class=\"isr__note isr__note--regenerating\">Rebuilding in the background; the next visitor gets the fresh HTML.</p>\n</div>\n<style>\n.isr { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.isr__title { margin: 0 0 10px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }\n.isr__revalid { font-size: 9px; font-weight: 400; color: #24143099; }\n.isr__served { padding: 12px; border-radius: 8px; background: #24143010; text-align: center; font-weight: 600; margin-bottom: 10px; }\n.isr--stale .isr__served, .isr--regenerating .isr__served { background: var(--a); }\n.isr__note { display: none; margin: 0; font-size: 10px; color: #24143099; }\n.isr--fresh .isr__note--fresh, .isr--stale .isr__note--stale, .isr--regenerating .isr__note--regenerating { display: block; }\n</style>", "tailwind": "<div class=\"isrtw isrtw--{{stage}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\" role=\"img\" aria-label=\"{{pageTitle}}, {{stage}}, revalidate every {{revalidateSeconds}}s\">\n <p class=\"m-0 mb-2.5 font-bold flex justify-between items-center text-xs\">{{pageTitle}} <span class=\"text-[9px] font-normal text-[#24143099]\">revalidate: {{revalidateSeconds}}s</span></p>\n <div class=\"isrtw__served p-3 rounded-lg bg-[#24143010] text-center font-semibold mb-2.5\" style=\"--a:{{accent}};\">Served from static HTML</div>\n <p class=\"isrtw__note isrtw__note--fresh hidden m-0 text-[10px] text-[#24143099]\">Within the revalidate window &mdash; served as-is, no rebuild needed.</p>\n <p class=\"isrtw__note isrtw__note--stale hidden m-0 text-[10px] text-[#24143099]\">Window expired &mdash; this stale copy is served <em>while</em> a rebuild is triggered.</p>\n <p class=\"isrtw__note isrtw__note--regenerating hidden m-0 text-[10px] text-[#24143099]\">Rebuilding in the background; the next visitor gets the fresh HTML.</p>\n</div>\n<style>\n.isrtw--stale .isrtw__served, .isrtw--regenerating .isrtw__served { background: var(--a); }\n.isrtw--fresh .isrtw__note--fresh, .isrtw--stale .isrtw__note--stale, .isrtw--regenerating .isrtw__note--regenerating { display: block; }\n</style>", "react": "export function Isr({\n pageTitle = \"{{pageTitle}}\",\n revalidateSeconds = {{revalidateSeconds}},\n stage = \"{{stage}}\",\n accent = \"{{accent}}\",\n}) {\n const notes = {\n fresh: \"Within the revalidate window \\u2014 served as-is, no rebuild needed.\",\n stale: <>Window expired &mdash; this stale copy is served <em>while</em> a rebuild is triggered.</>,\n regenerating: \"Rebuilding in the background; the next visitor gets the fresh HTML.\",\n };\n const highlighted = stage === \"stale\" || stage === \"regenerating\";\n return (\n <div role=\"img\" aria-label={`${pageTitle}, ${stage}, revalidate every ${revalidateSeconds}s`} style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 10px\", fontWeight: 700, display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", fontSize: 12 }}>{pageTitle} <span style={{ fontSize: 9, fontWeight: 400, color: \"#24143099\" }}>revalidate: {revalidateSeconds}s</span></p>\n <div style={{ padding: 12, borderRadius: 8, textAlign: \"center\", fontWeight: 600, marginBottom: 10, background: highlighted ? accent : \"#24143010\" }}>Served from static HTML</div>\n <p style={{ margin: 0, fontSize: 10, color: \"#24143099\" }}>{notes[stage]}</p>\n </div>\n );\n}" }