perf(nuxt): use prerendered islands to serialise/revive payload

[danielroe]

🔗 Linked issue

#19772

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 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 PR aims to move server component HTML out of the payload and to use the separate (prerendered) island instead. No download is required for hydrating HTML. This should significantly decrease size of HTML (as it won't be located in page twice) and make using server components much more compelling for large layout elements.

We can now also remove the almost duplicate implementations of NuxtServerComponent and NuxtIsland which originally diverged to allow static generation prefetching with payloads.

Note: I would expect we can now refactor packages/nuxt/src/components/runtime/server-component.ts to a much more minimal implementation.

I did unearth an issue with slots in server components which I will investigate shortly but I do not believe it is not a regression introduced by this PR. edit: it was

📝 Checklist

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

[huang-julien]

There's indeed an issue with slots This issue doesn't comes from this PR.

We can have multiple nodes when querying document.querySelectorAll('[nuxt-ssr-component-uid="2"]') on /islands. But the current implementation requires all nuxt-ssr-component-uid to be unique so it can target the correct DOM node to teleport the slot

I'll fix this probably in the incoming weekend

[danielroe]

/trigger release

[github-actions]

🚀 Release triggered! You can now install nuxt@npm:nuxt3@pr-21461