防止单文件组件的无样式内容的 flash

Question

I want to replace my html navigation

<div id="header-wrapper">
  <div id="header-logo-title">
    <nav>
      <ul id='mainNav'>
         <li>Home</li>
      </ul>
    </nav>
  </div>
</div>

with a VUE component like this:

<navigation>
    <nav-item>Home</nav-item>
</navigation>

I read here that one should extract the css, so that it won't be injected by JS which could cause flash of unstyled content :

When using Single-File Components, the CSS inside components are injected dynamically as tags via JavaScript. This has a small runtime cost, and if you are using server-side rendering it will cause a “flash of unstyled content”. Extracting the CSS across all components into the same file will avoid these issues, and also result in better CSS minification and caching.

So, I extraced my component CSS into a file, but I still experience flash of unstyled content on load.

Does the flash of unstyled content happen when <navigation>..</navigaton> is replaced by

<div id="header-wrapper">
  <div id="header-logo-title">
    <nav>
      <ul id='mainNav'>
         ....
      </ul>
    </nav>
  </div>
</div>

through VUE? If so, how can one prevent this?

Answer 1

One can avoid this by using server-side rendering of VUE . This will result in sending the client the rendered HTML

<div id="header-wrapper">
  <div id="header-logo-title">
    <nav>
      <ul id='mainNav'>
         <li>Home</li>
      </ul>
    </nav>
  </div>
</div>

instead of

<navigation>
    <nav-item>Home</nav-item>
</navigation>

before JavaScript runs.

An important note from this article :

With SSR, your app does not load or run any faster, indeed it may run slightly slower as the server has the added task of rendering the app. But the page content is shown sooner therefore the user can see engage with page sooner.