feat(nuxt): support server components with extracted payloads

[danielroe]

🔗 Linked issue

❓ 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)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This builds on #9972 to support server components in fully static websites. It does two things:

1. it emits standalone data for a server component, e.g. ~/.output/public/__nuxt_island/PureComponent:6LYrSuODRS. This means that server components aren't necessarily tied to the page in which they are used.
2. it also embeds any server components within a page's payload. This means that when loading a page, the payload can be prefetched without needing to make further network calls when switching to the page.

There is scope for improving this, for example, it's not necessarily to include the HTML in the payload if we could prefetch it. But I don't think this PR binds us to that - it's just an implementation detail at the moment and I would suggest we switch to fully extracted server components once we have a way of prefetching them - maybe through something like #7805.

📝 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

[pi0]

This is a good idea to use asyncData to enable payload extraction but on the other hand, we would be unable to implement and support hybrid islands (with remote sources) in static websites.

As far as I know, we currently use dynamic import() and with unique URLs for each island props, the browser/ESM resolver is supposed to cache them for second navigation or rendering. Isn't it happening as expected? (they are supposed to be extracted but in their own chunk basically)

[danielroe]

Nice thought! Created an issue so we can track: nuxt/nuxt#12343. I'll push a fix to this PR so we support both payload extraction and runtime fetching when props are changed.

[pi0]

Thanks for creating tracker however i'm still wondering what is the issue we are trying to solve. Island responses are extracted but not in the same payload file and network requests should be cached. Putting their response into one payload, would duplicate them across pages while currently we download a unique island+props in one request.

[danielroe]

The issue is the waterfall - they aren't fetched until the page starts being loaded, at which point the delay the transition, whereas if they are in the payload then they can be prefetched ahead of time and the page transition is instant.

Moreover, I don't believe they are extracted into separate files at all when generating at the moment - happy to look into it 🤔

[pi0]

This is by design for islands, in general, to be individually loaded assets (like images). However, they are expected to be pre-rendered if not it is probably a bug.

I guess we can have a separate implementation nuxt-server-island component for the specific purpose of server components then that is inlined into page payloads and optimized without the need to support remotely. Reusing code and server logic as much as possible but optimizing for their purpose.

[danielroe]

Pushed a couple of improvements (and fixed the bug of not emitting island output during prerender) and updated the issue description. Let me know what you think 😊

[pi0]

Thanks for the updates. However still, in full static mode with payload extraction, when two pages use the same islands/props, duplicate data would be downloaded (and prefetched) in the payload of each page. Copy islands.vue to islands2.vue in the fixture for example.

Is it possible that we enable useAsyncData behavior only for server-only .server components to leveraging full-static? While keeping <NuxtIsland> to network fetch and rely on browser as is and cache with individual chunks we can experiment with hybrid remote islands easier also . (Since useAsyncData is always cached in the payload.)