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 - https://github.com/nuxt-community/vuetify-module/issues/210#issuecomment-549203258

[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?

[freddy38510]

@adrienbaron Yeah that's right! The unused CSS is also dropped from js files.

I just did a comparison with and without purged CSS on a basic template of Vuetify with a Card component in content.

Without purged CSS:

With purged CSS:

[vishr]

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

Not really. The issue still exists.

[kevinmarrec]

@adrienbaron Thank for your time investigating, so from your POV it seems that it's overall Vuetify components that would have a SSR issue ?

EDIT : Succeeded to reproduce it without Vuetify, but it's related of how Vuetify components are handling css (importing the css in js) : https://github.com/kevinmarrec/nuxt-css-issue

[DispatchCommit]

Super lazy workaround, add to nuxt.config

css: [
    'vuetify/dist/vuetify.css',
],

It's a heavy-handed overkill workaround, but it prevent some massive page reflowing I was having on load, so it's a trade off of a fast load time that feels sluggish, and broken, and a slower load time that looks snappier. Combining this with @nuxtjs/device to target mobile / desktop separately for a best SSR 'look' is worth the increase to me.

[kevinmarrec]

@DispatchCommit You don't have double css ?

[DispatchCommit]

@kevinmarrec No I do get duplicated CSS for some styles, so it's not ideal, but it's functional for now until we get a better a better solution for the bug you've pointed out above.

[GarciaTandela]

I guys, i'm having the same problem with my web app. When i run in development the page runs well and don't take long for css styles been applied. But when when it goes to production this is what happens, the styles takes time for come then it loads well. Can anyone tell me why is having this behavior ?

[GarciaTandela]

First i though it was a problem with vuetify version i tried to update it, but it didn't solve anything. I'm really needing for a solution

[adrienbaron]

@YannickSilva It's possible you have the same problem, meaning SSR doesn't include styles.

I see 2 choices for now:

• Disable SSR on Nuxt, this is not great and depending on your use case not necessarily what you want, but that would eliminate the state where the style is not there (and replace it with a loading page).

• Try to use my version of Vuetify loader: https://github.com/vuetifyjs/vuetify-loader/pull/126#issuecomment-629618092. I do use it in production, but it's not been widely tested so use at your own risk.

First you need to update your package.json to use the version of vuetify-loader that include my patch:

"vuetify-loader": "git+https://github.com/adrienbaron/vuetify-loader.git"

Then it requires to change a bit of configuration depending on the version of Vuetify Nuxt module you are using.

Here is an example nuxt.config.js with @nuxtjs/vuetify v1.x:

export default {
  // ...
  build: {
    loaders: {
      vueStyle: { manualInject: true }
    }
  },
  vuetify: {
    treeShake: {
      loaderOptions: { registerStylesSSR: true }
    }
  }
}

For @nuxtjs/vuetify v2.x the way you pass options to vuetify-loader has changed:

// nuxt.config.js
export default {
  // ...
  build: {
    loaders: {
      vueStyle: { manualInject: true }
    }
  },
  vuetify: {
    loader: {
      registerStylesSSR: true
    }
  }
}

Finally, when using manualInject in Nuxt.js, the css block from nuxt.config.js will not work. Instead, you will need import your own stylesheets in thestyle block of your default template for it to be picked up by vue-style-loader.

For example like so:

<!-- default.vue -->
<style lang="stylus">
@import "../assets/style/app.styl"
</style>

[GarciaTandela]

@adrienbaron the problem is that i really need the SSR working because of SEO, and for the second option if isn't well tested i would go for it, so i can not have problem in the future. But i have another question if i use the Tag would it affect my page SEO ?

[adrienbaron]

@YannickSilva if you use the second option it shouldn't affect SEO :). I use it on: https://www.clashofstats.com/ if you want to checkout how it behaves

[GarciaTandela]

@adrienbaron thanks, i will give it a try. Them i will tell you something, thanks for the help

[GarciaTandela]

@adrienbaron i don't understand how i will install your npm package, should i copy paste your package.json or something ? There no command for installing it

[adrienbaron]

@YannickSilva basically the PR is currently open, when it's merged and a new version of vuetify-loader is released it will just require updating to it (probably it will be done inside the dependencies of vuetify-module). In the meantime, NPM has a feature where you can use a git branch as a dependency. So what you can do is in your package.json devDependencies add:

"vuetify-loader": "git+https://github.com/adrienbaron/vuetify-loader.git"

The update your dependencies. Your project should then use the version of vuetify-loader with my changes 👍 .

[GarciaTandela]

Thanks @adrienbaron

[JosephSaw]

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 👍

@adrienbaron thanks for your time in coming up with a workaround!

I am trying to follow your process and make the changes in @/vue/component but it seems that such a file doesn't exist for me, I have tried looking through "component-compiler-utils" but I am not sure if that is the one...

[adrienbaron]

@JosephSaw I actually came up with another fix for this, it takes the form of an MR on Vuetify Loader, it sadly hasn’t been merged yet, but you can try to use my version if you want to: https://github.com/vuetifyjs/vuetify-loader/pull/126