Version

2.6.14

Reproduction link

https://github.com/tcstory/vue-ssr-issue

Steps to reproduce

1. npm run build
2. npm run start
3. visit http://localhost:3000/page1 with javascript enabled and disabled respectively

What is expected?

with javascript disabled, the corresponding css should be inject to html

What is actually happening?

the corresponding css is missed

What problems does this cause?

Let's consider the following situations

1. user visit the page
2. after browser finish loading the page, javascript will be excuted and the missed css file will be inject to the page
3. the page will update after the css file is loaded

In this process, the user can observe that the page is "jittering" because some css styles are missing when the page is loaded at the beginning, and the css styles are not loaded back until after the js is executed.

what causes this bug?

the following are my own analysis

During server-side rendering, vue generates a string of hash inside the component. By using this string of hash, vue knows what components the page depends on during rendering, and then injects the static resources of these components into the html.

This process usually works without any problems, unless you run into webpack's splitChunks.

Let's assume we have two pages, page1 and page2, and a btn1.vue file that they both depend on

1. page1.vue depends on btn1.vue
2. page2.vue depends on btn1.vue
3. btn1.vue depends on btn1.css

after building, you can get the following files

1. page1.js
2. page2.js
3. page1~page2.js (this file contains the component's js and css code)

However, if you have an additional page3 page, and this page also depends on btn1.css, in this case, after building, you will get the following files

1. page1.js
2. page2.js
3. page3.js
4. page1~page2.js (this file only contains the js code of btn1.vue)
5. page1~page2 ~ page3.js (this file only contains the code of btn.css)

At this time, when you visit the page1 page, ssr can only inject "page1.js" and "page1 ~ page2.js" files for you, but it doesn't know that you also need page1~page2 ~ page3.js files.

my english is poor, here is a chinese version about the issue: tcstory/blog#13