103 Early Hints for main css + renderToNodeStream/pipeToNodeWritable

[209]

We can to make render function more better if add this flow (ssr-prod-webserver.js)
But we need to separate render-template.js

We need to cut render-template into small pieces

  async #writeRenderTemplate (clientDir) {
    const htmlFile = join(clientDir, 'index.html')
    const html = this.readFile(htmlFile)

    const templateFn = await getProdSsrTemplateFn(html, this.quasarConf)

    this.writeFile(
      'render-template.js',
      `export default ${ templateFn.source }`
    )

    ...
  }

And we need reorganizate render:

    const runtimePageContent = await renderToString(renderFn, ssrContext)

  onRenderedList.forEach(fn => { fn() })

  // maintain compatibility with some well-known Vue plugins
  // like @vue/apollo-ssr:
  typeof ssrContext.rendered === 'function' && ssrContext.rendered()

  ssrContext._meta.runtimePageContent = runtimePageContent

  <% if (metaConf.hasStore && ssr.manualStoreSerialization !== true) { %>
    if (ssrContext.state !== void 0) {
      ssrContext._meta.headTags = renderStoreState(ssrContext) + ssrContext._meta.headTags
    }
  <% } %>

I think reason of adding headTags afrer renderToString is useMeta.. But I don't check it.
In stream we need add ssrContext in the end of head for better loading in browser.
And we need to write safety code: don't update stores in renderToString.

Or we can add script with SSR context and main module script after renderToString, in the end of body.
It's not the best way, but now it work similary: scrips start to load after load index.html

And if you'll implement #18203
everybody can modify