Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

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

Merged
merged 20 commits into from
Apr 12, 2022

Conversation

antfu
Copy link
Member

@antfu antfu commented Mar 30, 2022

🔗 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

// 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
    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:

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
Copy link

netlify bot commented Mar 30, 2022

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...

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 antfu marked this pull request as draft March 30, 2022 11:18
@antfu antfu changed the title fix(vite-node): on-deman manifest generation fix(vite-node): on-demand manifest generation Apr 1, 2022
@pi0 pi0 added enhancement New feature or request pending vite labels Apr 5, 2022
@antfu antfu mentioned this pull request Apr 5, 2022
5 tasks
@antfu antfu marked this pull request as ready for review April 6, 2022 23:37
@antfu
Copy link
Member Author

antfu commented Apr 6, 2022

FOUC fixed by #4106

@antfu antfu removed the pending label Apr 7, 2022
@pi0
Copy link
Member

pi0 commented Apr 8, 2022

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
Copy link
Member

pi0 commented Apr 12, 2022

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.

image

@pi0 pi0 merged commit e31c604 into main Apr 12, 2022
@pi0 pi0 deleted the fix/vite-node-ondemand-manifest branch April 12, 2022 10:04
@pi0 pi0 changed the title fix(vite-node): on-demand manifest generation feat(vite-node): on-demand manifest generation Apr 12, 2022
@danielroe danielroe added the 3.x label Jan 19, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
3.x enhancement New feature or request vite
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants