perf: use spa fallback on cold cache

Author: danielroe

app/plugins/fix.client.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin({
+  enforce: 'pre',
+  setup(nuxtApp) {
+    // TODO: investigate why this is needed
+    nuxtApp.payload.data ||= {}
+  },
+})

modules/isr-fallback.ts

@@ -0,0 +1,27 @@
+import { readFileSync, writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { defineNuxtModule } from 'nuxt/kit'
+import { provider } from 'std-env'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'isr-fallback',
+  },
+  setup(_, nuxt) {
+    if (provider !== 'vercel') {
+      return
+    }
+
+    nuxt.hook('nitro:init', nitro => {
+      nitro.hooks.hook('compiled', () => {
+        const spaTemplate = readFileSync(nitro.options.output.publicDir + '/200.html', 'utf-8')
+        const outputPath = resolve(
+          nitro.options.output.serverDir,
+          '..',
+          'spa.prerender-fallback.html',
+        )
+        writeFileSync(outputPath, spaTemplate)
+      })
+    })
+  },
+})

nuxt.config.ts

@@ -85,8 +85,20 @@ export default defineNuxtConfig({
   routeRules: {
     '/': { prerender: true },
     '/opensearch.xml': { isr: true },
-    '/**': { isr: 60 },
-    '/package/**': { isr: 60 },
+    '/**': {
+      isr: {
+        expiration: 60,
+        fallback: 'spa.prerender-fallback.html',
+      },
+    },
+    '/api/**': { isr: 60 },
+    '/200.html': { prerender: true },
+    '/package/**': {
+      isr: {
+        expiration: 60,
+        fallback: 'spa.prerender-fallback.html',
+      },
+    },
     '/:pkg/.well-known/skills/**': { isr: 3600 },
     '/:scope/:pkg/.well-known/skills/**': { isr: 3600 },
     // never cache
@@ -186,6 +198,7 @@ export default defineNuxtConfig({
 
   htmlValidator: {
     failOnError: true,
+    ignore: ['/200.html'],
   },
 
   ogImage: {