feat(vite-node): on-demand manifest generation

[antfu]

🔗 Linked issue

On top of #3967

It's not working correctly yet, because of two blockers:

1 - On-demand manifest loading timing

Since with Vite Node, everything is on-demand now. Thus we don't know the module graph until we actually trigger the rendering. While vue-bundler-renderer seems to assume the format has been bundled based and requests the manifest and server bundle at the same timing

framework/packages/nitro/src/runtime/app/render.ts

Lines 18 to 24 in ac40c97

	// Load server bundle
	const createSSRApp = await getSSRApp()
	if (!createSSRApp) { throw new Error('Server bundle is not available') }
	// Load client manifest
	const clientManifest = await getClientManifest()
	if (!clientManifest) { throw new Error('client.manifest is not available') }
	// Create renderer

It causes the FOUC on initial load (and missing entries for newly discovered CSS modules). I see two ways of fixing it:

• A: Make the clientManifest option of createRenderer possibility to be a function in vue-bundler-renderer so we could evaluate after we request the rendering
• B: Allow the server bundle to return a manifest object along with the rendered app
  

  framework/packages/vite/src/runtime/server.mjs

  Lines 23 to 24 in 949def6

  	const result = await render(ssrContext)
  	return result

2 - Manifest Cache

Since this change, the manifest is now on-demand and does not change during the development. Causing it reuses the cache and does not re-fetch:

framework/packages/nitro/src/runtime/app/render.ts

Line 14 in ac40c97

const getClientManifest = cachedImport(() => import('#build/dist/server/client.manifest.mjs'))

Do you know if there is a way to force cleaning the cache, or did I missed anything?

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	b5f1689
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/6255439bb514f60008b0fd13
😎 Deploy Preview	https://deploy-preview-3968--nuxt3-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[antfu]

FOUC fixed by #4106

[pi0]

Quickly looking it is an amazing improvement!! Two small changes would like to add before merging:

• Serialize vite-node options object as one env and access with destr
• Use get method to pass id

[pi0]

On latest commit, using yarn example vite-node i get _fetch is not a function () error on second SSR requests:

Update: Fixed by directly importing $fetch.