Cache a route after user visits it with nuxt hybrid rendering and ssr

[dbzx10299]

When using nuxt3 with ssr how can we cache a route after the user visits it. It isn‘t working for me unless I use pre rendering. I have a good idea why this is happening, although I don't know how to handle this. When the npm run build command is run, the output is dist/_nuxt/b-__gekbe.js and a whole bunch of other files that have some hash. They are indeed being cached but the page does not seem to be cached because after I visit the page, if I go offline then re-visit, I get a blank screen despite the js payload being cached.

I have a project structure like this

pages/
└── products/
    └── [handle].vue
nuxt.config.ts

and in my nuxt.config.ts I have something like this

export default defineNuxtConfig({
  devtools: { 
    enabled: false 
  },
  css: [
    '@/assets/main.css'
  ],
  modules: [
    '@vite-pwa/nuxt'
  ],
  pwa: {
    manifest: {
      name: 'foo',
      short_name: 'foo',
      background_color: '#f0f0f0',
      theme_color: '#f0f0f0',
      orientation: 'portrait',
      display: 'standalone',
      icons: [
        {
          src: 'pwa-192x192.png',
          sizes: '192x192',
          type: 'image/png'
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png'
        }
      ]
    },
    registerType: 'autoUpdate',
    workbox: {
      navigateFallback: undefined,
      globPatterns: [
        "**/*.{js,css,html,png,jpg,jpeg,svg,webp,webm,woff2,woff,ttf,eot,webmanifest}"
      ],
      runtimeCaching: [
        {
          urlPattern: /^https:\/\/cdn\.shopify\.com\/.*/i,
          handler: 'CacheFirst',
          options: {
            cacheName: 'shopify-file-cache',
            expiration: {
              maxEntries: 10,
              maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
            },
            cacheableResponse: {
              statuses: [0, 200]
            }
          }
        }
      ]
    }
  },
  nitro: {
    preset: 'netlify'
  },
  routeRules: {
    '/products/**': {
      headers: {
        'netlify-cache-tag': 'products',
        'cache-control': 'public, max-age=3600, must-revalidate',
        'netlify-cdn-cache-control': 'public, s-maxage=300, stale-while, revalidate=604800'
      }
    }
  },
  compatibilityDate: '2024-07-06'
})

[userquin]

vite-pwa/sveltekit#65 (comment)

[userquin]

[userquin]

Since nuxt use hybrid navigation mode, there is no api call on first request, on next requests the useFetch will use th eapi call, and so we need to include in denylist ssr pages and api calls via a custom handler for:

• server pages (dynamic ones or not)
• api calls

In the playground I'm preparing there are 2 server pages and 2 api calls:

• /products and /products/[id] pages and
• /api/products and /api/products/[id] api calls

[userquin]

The playground will use custom service worker.

[userquin]

https://github.com/userquin/vite-pwa-nuxt-ssr-pages

[userquin]

You can also include 404 and 410 statuses to allow caching server pages and api calls for missing entries... otherwise redirected to offline page on page refresh

[dbzx10299]

Wow thanks a lot for taking the time to create a repo for this! I will study this and see how you got this to work, this would be useful in the docs as well. I take it that for something like this is must be done with injectManifest and using the pwa config in nuxt.config.ts is not granular enough.

[userquin]

@dbzx10299 check last commit about cachedResponseWillBeUsed, we can sotre the cached response in the state and return that response, now any request when offline present in the cache will work

[dbzx10299]

Got it. One thing just so I'm clear, for ssr specifically, do we need to use injectManifest and bypass the pwa.workbox.runtimeCaching[{/*...*/}]. I have been reading the docs and I see that the injectManifest seems quite a bit more complex but also more powerful and allows for more fine tuning.