fix(nuxt): skip payload extraction for island context

[harlan-zw]

🔗 Linked issue

nuxt-modules/og-image#35

❓ 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

When prerendering a Nuxt app that uses Nuxt Islands components, the home page payload will be reset whenever an Island component is rendered.

The consequence of this for prerendered static Nuxt apps is that any data fetching required for the home page won't work, potentially breaking the page.

Reproduction

https://stackblitz.com/edit/nuxt-starter-iqevpt?file=pages/z.vue

• nuxi generate
• cat .output/public/_payload.js (you'll see export default {data:{},prerenderedAt:1682833083825} which is not correct)
• npx sirv-cli .output/public/, you'll see the posts can't load

The expected output for the payload is:

export default {data:{T6SB1FMcRf:[{title:"10 Tips for Writing Clean JavaScript Code",slug:"10-tips-for-writing-clean-javascript-code"},{title:"How to Build a Responsive Website with Bootstrap 5",slug:"how-to-build-a-responsive-website-with-bootstrap-5"},{title:"Introduction to Machine Learning with Python",slug:"introduction-to-machine-learning-with-python"}]},prerenderedAt:1682833610711}

Issue / Solution

The issue seems to be related to the island context being given the / path and allowed to generate payloads. By ignoring payload extraction for island components we can get around this issue.

An alternative solution may be to change the given path, but not sure if this will have unexpected consequences.

There may be a better solution than these two so please advise.

📝 Checklist

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

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders