perf: use spa fallback on cold cache (#878)

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,30 @@
+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')
+        for (const path of ['package', '']) {
+          const outputPath = resolve(
+            nitro.options.output.serverDir,
+            '..',
+            path,
+            'spa.prerender-fallback.html',
+          )
+          writeFileSync(outputPath, spaTemplate)
+        }
+      })
+    })
+  },
+})

nuxt.config.ts

@@ -59,6 +59,7 @@ export default defineNuxtConfig({
   app: {
     head: {
       htmlAttrs: { lang: 'en-US' },
+      title: 'npmx',
       link: [
         {
           rel: 'search',
@@ -85,8 +86,10 @@ export default defineNuxtConfig({
   routeRules: {
     '/': { prerender: true },
     '/opensearch.xml': { isr: true },
-    '/**': { isr: 60 },
-    '/package/**': { isr: 60 },
+    '/**': { isr: getISRConfig(60, true) },
+    '/api/**': { isr: 60 },
+    '/200.html': { prerender: true },
+    '/package/**': { isr: getISRConfig(60, true) },
     '/:pkg/.well-known/skills/**': { isr: 3600 },
     '/:scope/:pkg/.well-known/skills/**': { isr: 3600 },
     // never cache
@@ -279,3 +282,15 @@ export default defineNuxtConfig({
     dirs: ['~/composables', '~/composables/*/*.ts'],
   },
 })
+
+function getISRConfig(expirationSeconds: number, fallback = false) {
+  if (fallback) {
+    return {
+      expiration: expirationSeconds,
+      fallback: 'spa.prerender-fallback.html',
+    } as { expiration: number }
+  }
+  return {
+    expiration: expirationSeconds,
+  }
+}