App-vite SSR does not inject the styles at initial render in development

[Evertvdw]

What happened?

The first HTML send to the client with SSR does not contain style tags, which causes a flash of unstyled content. This is related to vitejs/vite#2282 and vitejs/vite#2013. I think there are workarounds possible but I think those should be handled by Quasar internally.

This only happens when in development but that leads to a very bad developer experience, because you then have to assume it will only happen on development.

What did you expect to happen?

Styles should be present at first load

Reproduction URL

Repro based on project starter

How to reproduce?

1. Create a new starter project with Vite
2. Run dev mode with SSR
3. In the browser disable javascript and reload the page to see the initial page without styling.
4. Inspect the source Ctrl + u to see that there are indeed no style tags present

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), SSR Mode

Platforms/Browsers

No response

Quasar info output

Operating System - Windows_NT(10.0.22000) - win32/x64
NodeJs - 16.14.0

Global packages
  NPM - 8.3.1
  yarn - 1.22.17
  @quasar/cli - 1.3.0
  @quasar/icongenie - 2.3.0
  cordova - Not installed

Important local packages
  quasar - 2.6.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time    
  @quasar/app-vite - 1.0.0-beta.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.13.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14
  pinia - 2.0.11 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.8.6 -- Native-ESM powered web dev build tool
  eslint - 8.11.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - METT-EVERT
  Ethernet 2 - 192.168.2.15

Relevant log output

No response

Additional context

No response

[github-actions]

Hi @Evertvdw! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[rstoenescu]

This is a limitation of dev SSR. We cannot inject the styles because we'd need to continuous build the whole project in order to extract the critical css paths, which would defeat the whole purpose of having a very fast dev DX.
However, the production output will inject the styles.

[Evertvdw]

It seems they fixed this at nuxt side, in this PR nuxt/vite#195. I dont really get what they are doing there but maybe we can do something similar or approach them how/if they fixed this?

[rstoenescu]

They might be doing what I said above (building and rebuilding), otherwise I currently see no option other than keep on rebuilding the whole project --- which would essentially work like the webpack variant (NOT what we want). I could build the project only once and at startup but then whatever changes are done to the styles (like adding new style files) will not be picked up. In any case, will investigate in the following days.

[stefanvanherwijnen]

@rstoenescu
I'm not sure if this has already been fixed, but this seems to work: vitejs/vite#2282 (comment)

[Evertvdw]

@rstoenescu
I'm currently running into this limitation again, would it be possible to see if we can include the method mentioned above in Quasar as well?

Or if not in Quasar generically is there a way we can implement this for ourselves using SSR middleware or something like that?