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

fix(nuxt): experimental build manifest + client route rules #21641

Merged
merged 60 commits into from Sep 19, 2023

Conversation

danielroe
Copy link
Member

@danielroe danielroe commented Jun 19, 2023

πŸ”— Linked issue

resolves #21370
closes #18419
resolves #15024
related: #14507
resolves #19228
resolves #22720

❓ Type of change

  • πŸ“– Documentation (updates to the documentation, readme or JSdoc annotations)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

This adds an app manifest (accessible at /_nuxt/builds/meta.json) and uses it to determine whether to load a payload. We might allow this to be toggleable as an experimental feature.

TODO:

  • respect redirect rules within router middleware
  • extract relevant parts to nitro and refactor as needed

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@nuxt-studio
Copy link

nuxt-studio bot commented Jun 19, 2023

βœ… Live Preview ready!

Name Edit Preview Latest Commit
Nuxt Docs Edit on Studio β†—οΈŽ View Live Preview d1ceaf3

@danielroe danielroe requested a review from pi0 June 20, 2023 12:07
@danielroe danielroe marked this pull request as ready for review June 20, 2023 12:07
@danielroe danielroe added this to the 3.7 milestone Jun 20, 2023
@Hebilicious
Copy link
Member

Some things that I would like to see in the manifest :

  • development mode
  • devtools support
  • list of all server handlers / api routes
  • list of all pages

Copy link
Member

@pi0 pi0 left a comment

Choose a reason for hiding this comment

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

Nice work πŸ’―

packages/nuxt/src/app/composables/manifest.ts Outdated Show resolved Hide resolved
packages/nuxt/src/app/composables/payload.ts Outdated Show resolved Hide resolved
packages/nuxt/src/app/plugins/payload.client.ts Outdated Show resolved Hide resolved
packages/nuxt/src/core/nitro.ts Outdated Show resolved Hide resolved
packages/nuxt/src/core/nitro.ts Outdated Show resolved Hide resolved
let timeout: NodeJS.Timeout
const config = useRuntimeConfig()

async function getLatestManifest () {
Copy link
Member Author

Choose a reason for hiding this comment

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

might be worth exposing this or allow customising timeout?

id: buildId,
timestamp: buildTimestamp,
matcher: exportMatcher(routeRulesMatcher),
prerendered: nuxt.options.dev ? [] : [...prerenderedRoutes]
Copy link
Member Author

Choose a reason for hiding this comment

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

push /** as a default route rule when prerendering site

}
})
if (navigator.connection?.effectiveType !== 'slow-2g') {
setTimeout(getAppManifest, 1000)
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this 1s arbitrary?

If so, there is a specific threshold you need to exceed for the script not to be considered blocking (different for devices), if this isn't passing that, maybe it's worth just loading immediately on Nuxt ready?

@harlan-zw
Copy link
Contributor

Looking good πŸ‘ Seems quite powerful, I like the hook for end users to implement how they like.

Is it worth solving the tree-shaking route rules for the server/client before merging this to minimise the manifest payload size?

@danielroe
Copy link
Member Author

/trigger release

@github-actions
Copy link
Contributor

πŸš€ Release triggered! You can now install nuxt@npm:nuxt3@pr-21641

@danielroe
Copy link
Member Author

Merging to test on next patch. Please do follow up on comments - I think they still need to be addressed.

@danielroe danielroe changed the title feat(nuxt): prerender build manifest fix(nuxt): experimental build manifest + client route rules Sep 19, 2023
@danielroe danielroe merged commit 7dce076 into main Sep 19, 2023
34 checks passed
@danielroe danielroe deleted the feat/app-manifest branch September 19, 2023 21:31
This was referenced Sep 19, 2023
@lwpinion
Copy link
Contributor

I am excited that you completed this feature!
However, I do have a question:
Is there a way to actually generate these routes so that Vue Router knows they exist? Or if not currently, do you have any plans to add this? As it stands, I have these redirects in place with Route Rules and they do work clientside, but I get warnings in the console when I have a NuxtLink pointing to one of them.

@danielroe
Copy link
Member Author

@lwpinion Could you open an issue with a reproduction? πŸ™

@lwpinion
Copy link
Contributor

@lwpinion Could you open an issue with a reproduction? πŸ™

I hope to soon! It's just a matter of trying to find the time. I'm in the middle of a big project.

@lwpinion
Copy link
Contributor

lwpinion commented Nov 3, 2023

@lwpinion Could you open an issue with a reproduction? πŸ™

Done!
#24112

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment