Vuetify with tree shake enabled in SSR doesn't render property

[vishr]

Module version
1.9.0

Describe the bug
If I enable treeShake the page rendered via SSR isn't display properly.

To Reproduce
I have attached a sample project.
nuxtjs-vuetify.zip

Steps to reproduce the behavior:

1. yarn && yarn build && yarn start
2. From the browser you will see a flicker before it renders properly
3. You can also do curl http://localhost:3000 > /tmp/out.htm and open to see the file

Expected behavior
The SSR version should be same as client

Screenshots

[enddevNZ]

TreeShake worked when i enabled it on your example project.

However, try add extractCSS to the build property. With not extracting, all of the CSS gets
injected into the head on every load from the vendor.js which is why that flickering will be prominent.

[MuhaddiMu]

Any idea why tree shake takes alot of time at initial rendering as compared to when tree shake is disabled?

[kevinmarrec]

@vishr Is it fixed with extractCSS ? If no when I'm not sure how to help, it would be more likely Nuxt issue and not specific to this module.

[kevinmarrec]

@MuhaddiMu Not sure what you are talking about, with https://github.com/nuxt-community/vuetify-module/releases/tag/v2.0.0-alpha.0 , there is no way to not use treeShaking. Vuetify is treeshakable by default and you shouldn't use dist/vuetify.js + dist/vuetify.css which was possible with treeShake: false before.

[slipros]

@vishr check that - #210 (comment)

[adrienbaron]

I'm currently investigating the same issue. From what I gathered so far when using treeShake generated style blocks don't get integrated in the SSR result.
Using treeShake: false will integrate all Vuetify CSS in the page as a style tag (which we definitely don't want!).
Finally the solution pointed out by @slipros (using extractCSS) seems to add all the CSS from Vuetify in an external CSS file and load that. We get styles with no JS enabled (Yay!) but we still ship way too much CSS :(.
According to Vue Style Loader doc there should be a way to make it inject those style during SSR (which would be best of both world, minimal amount of CSS shipped + instant style without having to wait for JS to kick in).
Not sure yet which project this change will impact though, so I'll keep investigating 🔎 !
If I figure out a solution I'll try to open a PR in the relevant project 👍

[enddevNZ]

Finally the solution pointed out by @slipros (using extractCSS) seems to add all the CSS from Vuetify in an external CSS file and load that.

From my understanding if your treeShake is enabled and working correctly, extractCSS will only pull out the css from the vendor.js that your treeShake has gathered. I have a project and it is working like this for me.

We get styles with no JS enabled (Yay!) but we still ship way too much CSS

I'd suggest doing a npm run build -- -a to check that the vuetify bundle is showing in your vendor.js.

[adrienbaron]

@enddevNZ Indeed, my bad, it does seem to only include the CSS for what's being used in the app, which is much better that what I first thought!
However it only include styles for components that end up in the bundle, so components that are used only on a page for example, and would only be in this page bundle will still not have style on SSR (and get it when the bundle for that page loads).
Moreover you still might have to load a bit more CSS than necessary (some components might make it to the bundle, but not be used on the actual page you are on, albeit that's probably an edge case :)).
The manualInject option from vue-style-loader looks promising though, as it seems to state explicitly that style from non .vue files (which is the case for Vuetify components) would only get bundled in JS and not added to SSR unless you use that option and wire things up. So maybe there is something there 👍

[adrienbaron]

Ok, I found a way to make it work 👍. Sadly it would require quite a few changes in Vuetify :(.

Basically we first would need to change Vuetify components like so:

// Name the styles import
import styles from './VCard.sass'

/* @vue/component */
export default mixins(
  Loadable,
  Routable,
  VSheet
).extend({
  // Add a beforeCreate hook that inject the styles if presents
  beforeCreate() {
    if(styles.__inject__) {
      styles.__inject__(this.$ssrContext)
    }
  },
  // ...
})

Then in Nuxt config you ask the vueStyle loader to use manualInject:

  /*
   ** Build configuration
   */
  build: {
    loaders: {
      vueStyle: { manualInject: true }
    }
  }

When doing so, the style get's injected in the SSR context correctly 👍. This behaviour from vue-style-loader only applies for SSR mode, the client still behaves the same (see here for client and here for server)

If manualInject is not set to true, then the current behaviour applies and styles.__inject__ is undefined so the beforeCreate hooks doesn't do anything.

This change would add that hook to every component though so it's still has a bit of a performance hit (even though it's just calling a function that immediately returns). Maybe we could find a way for that hook to be defined when running on the server?
Also there is the matter of functional components that cannot have lifecycle hooks, not sure what we could do for those :(.

Anyway that should probably move the the Vuetify repository if we want to take this further 👍

[freddy38510]

@adrienbaron Well spotted !
How could we add this hook to the framework of vuetify which import the main style ?

[adrienbaron]

@freddy38510 thanks! I think the only way for this to work is to add this hook to every Vuetify components with a PR there. I’ve asked for opinions on their discord, waiting for feedback before proceeding with doing the PR if everything looks OK for them

[freddy38510]

@adrienbaron i talked about the style "main.sass" imported from this file. As soon as "manualInject" is enabled, all styles imported from vuetify need to be injected manually. Not only those from components.

We could also use the module nuxt-purgecss to improve performance.
These options seems to work fine:

purgeCSS: {
  mode: 'postcss',
  paths: [
    'node_modules/vuetify/src/**/*.ts'
  ],
}

Of course, some selectors should be whitelisted.

[adrienbaron]

@freddy38510 good shout! Yes we would need to figure something out for the main style, I didn’t see it :)!
For nuxt purge css you mean to drop unused CSS from the style that are injected in the SSR page?