vitejs / vite-plugin-vue2

Vite plugin for Vue 2.7
MIT License
551 stars 47 forks source link

[ssr] Support module information collection #56

Open lzxb opened 2 years ago

lzxb commented 2 years ago

Module information can be collected like Vue3

export async function render(url, manifest) {
  const { app, router } = createApp()

  // set the router to the desired URL before rendering
  await router.push(url)
  await router.isReady()

  // passing SSR context object which will be available via useSSRContext()
  // @vitejs/plugin-vue injects code into a component's setup() that registers
  // itself on ctx.modules. After the render, ctx.modules would contain all the
  // components that have been instantiated during this render call.
  const ctx = {}
  const html = await renderToString(app, ctx)

  // the SSR manifest generated by Vite contains module -> chunk/asset mapping
  // which we can then use to determine what files need to be preloaded for this
  // request.
  const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
  return [html, preloadLinks]
}
lwansbrough commented 2 years ago

This is pretty high importance if I'm understanding correctly. Currently we're seeing a FOUC because Vite isn't including the chunks from these modules in the SSR render. As a result, our styles aren't loading until the JS app has fully hydrated. We obviously can't bring that to production. @yyx990803 Could you comment on the feasibility of adding that ctx.modules populating functionality to this plugin?