vercel · ijjk · Aug 11, 2022 · Aug 11, 2022 · Aug 11, 2022 · Aug 11, 2022
@@ -1,3 +1,10 @@
 {
-  "version": 3
+  "version": 3,
+  "routes": [
+    { "handle": "filesystem" },
+    {
+      "src": "/blog/(?<slug>[^/]+)(?:/)?",
+      "dest": "/blog/[slug]?slug=$slug"
+    }
+  ]
 }
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>404 | Not Found</title>
+</head>
+<body>
+  <h1>Not Found</h1>
+
+  <!-- Authentication example is for demo purposes only. In a production system, use better authentication strategies. -->
+  <p><a href="#">Generate this path via On-Demand ISR</a></p>
+  <script>document.querySelector('a').href = `/revalidate?path=${encodeURIComponent(window.location.pathname)}&authToken=a13f94f6-a441-47ca-95fc-9f44f3450295`</script>
+</body>
+</html>
@@ -0,0 +1,5 @@
+{
+  "runtime": "nodejs16.x",
+  "handler": "index.js",
+  "launcherType": "Nodejs"
+}
@@ -0,0 +1,35 @@
+const { parse } = require('querystring')
+
+module.exports = (req, res) => {
+  const matches = parse(req.headers['x-now-route-matches'])
+  let { slug } = matches
+
+  // if slug isn't present in x-now-route-matches it 
+  // matched at the filesystem level and can be parsed
+  // from the URL
+  if (!slug) {
+    const matches = req.url.match(/\/blog\/([^/]+)(?:\/)?/)
+    slug = matches[1]
+  }
+
+  res.setHeader('Content-Type', 'text/html; charset=utf-8')
+  res.end(`
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My blog | ${slug}</title>
+</head>
+<body>
+  <h1>Post: ${slug}</h1>
+  <p>Generated time: ${new Date().toISOString()}</p>
+
+  <p>This demonstrates a SSG blog that restricts generating new paths via On-Demand ISR instead of allowing any visited paths to generate a new path.</p>
+
+  <p>It works by leveraging \`expiration: false\` on a prerender to only allow generating new paths when the revalidate token is provided.</p>
+
+  <!-- Authentication example is for demo purposes only. In a production system, use better authentication strategies. -->
+  <p><a href="/revalidate?path=/blog/${slug}&authToken=a13f94f6-a441-47ca-95fc-9f44f3450295">Revalidate this path via On-Demand ISR</a></p>
+</body>
+</html>
+  `)
+}
@@ -0,0 +1,7 @@
+{
+  "expiration": false,
+  "group": 3,
+  "bypassToken": "87734ad8259d67c3c11747d3e4e112d0",
+  "allowQuery": ["slug"],
+  "fallback": "404.prerender-fallback.html"
+}
@@ -0,0 +1 @@
+[slug].func
@@ -0,0 +1,7 @@
+{
+  "expiration": false,
+  "group": 3,
+  "bypassToken": "87734ad8259d67c3c11747d3e4e112d0",
+  "allowQuery": ["slug"],
+  "fallback": "post-1.prerender-fallback.html"
+}
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My blog | post-1</title>
+</head>
+<body>
+  <h1>Post: post-1</h1>
+  <p>Generated time: 2022-08-11T15:12:34.656Z</p>
+
+  <p>This demonstrates a SSG blog that restricts generating new paths via On-Demand ISR instead of allowing any visited paths to generate a new path.</p>
+
+  <p>It works by leveraging `expiration: false` on a prerender to only allow generating new paths when the revalidate token is provided.</p>
+
+  <!-- Authentication example is for demo purposes only. In a production system, use better authentication strategies. -->
+  <p><a href="/revalidate?path=/blog/post-1&authToken=a13f94f6-a441-47ca-95fc-9f44f3450295">Revalidate this path via On-Demand ISR</a></p>
+</body>
+</html>
@@ -0,0 +1 @@
+[slug].func
@@ -0,0 +1,7 @@
+{
+  "expiration": false,
+  "group": 3,
+  "bypassToken": "87734ad8259d67c3c11747d3e4e112d0",
+  "allowQuery": ["slug"],
+  "fallback": "post-2.prerender-fallback.html"
+}
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My blog | post-2</title>
+</head>
+<body>
+  <h1>Post: post-2</h1>
+  <p>Generated time: 2022-08-11T15:12:34.656Z</p>
+
+  <p>This demonstrates a SSG blog that restricts generating new paths via On-Demand ISR instead of allowing any visited paths to generate a new path.</p>
+
+  <p>It works by leveraging `expiration: false` on a prerender to only allow generating new paths when the revalidate token is provided.</p>
+
+  <!-- Authentication example is for demo purposes only. In a production system, use better authentication strategies. -->
+  <p><a href="/revalidate?path=/blog/post-2&authToken=a13f94f6-a441-47ca-95fc-9f44f3450295">Revalidate this path via On-Demand ISR</a></p>
+</body>
+</html>
@@ -60,7 +60,7 @@ module.exports = (req, res) => {
     res.end(`
       <h1>Cache for "${pathToRevalidate}" Revalidated!</h1>
       <p>Redirecting you back.</p>
-      <meta http-equiv="refresh" content="2 url=${deployedUrl}">
+      <meta http-equiv="refresh" content="2 url=${deployedUrl}${pathToRevalidate}">
     `)
   }).catch((error) => {
     console.error(error.stack)

@@ -33,6 +33,16 @@ In this demo, you can see this happening with two paths: `/` and `/data`.
 
 When the revalidation is triggered, the cache will be revalidated, bypassing any caching that Vercel would normally provide.
 
+There is also an example of a blog that only generates new paths when triggered via On-Demand ISR with two initial posts that are prerendered.
+
+- `/blog/[slug]`
+  - base post prerender that allows generating news paths via On-Demand ISR
+  - [bypassToken](./.vercel/output/functions/index.prerender-config.json#L4)
+- `/blog/post-1`
+- `/blog/post-2`
+  - initial prerendered blog posts
+  - [bypassToken](./.vercel/output/functions/index.prerender-config.json#L4)
+
 ### Security
 
 #### `bypassToken`