Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add SSR workbox support #66

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

userquin
Copy link
Member

@userquin userquin commented Sep 23, 2023

This PR includes support for SSR Pages via custom runtime caching plugins using NetworkOnly or NetworkFirst handler:

  • any SSR page path will be included in the sw precache denylist entry with exact match, if includes dynamic route the plugin will include a wildcard regex instead
  • any SSR page path will include a custom handler
  • for all children in any not dynamic SSR parent route will be also included in the denylist and in the runtime caching entries
  • no dynamic pages can be cached, just enable the cache option, you can include cacheName and offlinePage

To run the playground, from root: nr dev:preview:build.

We need to:

  • handle dynamic routes like somepath-[someparam]
  • handle routeRules: vitesse-nuxt3 is using prerender and Elk is using routeRules instead prerender (traverse all pages applying the routeRules match to include/exclude them, maybe creating and using a radix3 router?)

The PR using eval to generate the runtimeCaching entry per route since we need to provide a few parameters, maybe we can use another approach.

┌───────────────────┬──────────────────┬───────────────────────────────────────────────┐
│ (iteration index) │       Key        │                    Values                     │
├───────────────────┼──────────────────┼───────────────────────────────────────────────┤
│         0         │   '/hi/:id()'    │       { exp: /^\/hi\//, dynamic: true }       │
│         1         │     '/list'      │      { exp: /^\/list$/, dynamic: false }      │
│         2         │ '/list/example2' │ { exp: /^\/list\/example2$/, dynamic: false } │
│         3         │ '/list/example'  │ { exp: /^\/list\/example$/, dynamic: false }  │
│         4         │  '/list/:id()'   │      { exp: /^\/list\//, dynamic: true }      │
└───────────────────┴──────────────────┴───────────────────────────────────────────────┘

imagen

? eval(`() => ({
urlPattern: ({ url, sameOrigin }) => sameOrigin && url.pathname.match(${regex}),
handler: 'NetworkFirst',
options: {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add purge on quota error

},
plugins: [{
handlerDidError: async () => Response.redirect(${JSON.stringify(offlinePage)}, 302),
cacheWillUpdate: async ({ response }) => response.status === 200 ? response : null
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

prevent error here (response can be null/undefined when offline)?
cacheWillUpdate: async ({ response }) => response?.status === 200 ? response : null

&& options.strategies !== 'injectManifest'

const ssrPages: NuxtPage[] = []
let nitroOptions: NitroOptions | undefined
nuxt.hook('nitro:init', (nitro) => {
Copy link
Member Author

@userquin userquin Sep 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we can just remove the configuration here and configure the options in vite:extendConfig hook

@userquin
Copy link
Member Author

userquin commented Sep 24, 2023

This PR is too complex to be solved automatically, the runtime caching should be included by the user, there are a lot of configuration that can be included, for example:

  • routes group set with a custom cache configuration, another routes group set with another custom cache configuration
  • custom cache with isr or swr configuration: should use StaleWhileRevalidate with proper headers?
  • custom cache with Vary header
  • custom cache with custom expiration (related to first entry)
  • complex Nuxt precache and routeRules mix: we should traverse pages with a router to check if we need to include/exclude some specific routes
  • complex dynamic routes layout/naming (somepath-[someparam] with children)
  • sort routes in a subtree to include first non dynamic ones (similar logic included in vue/unplugin router)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant