FOUC on dev ssr

[medz]

Environment

• Operating System: Darwin
• Node Version: v22.6.0
• Nuxt Version: 2.18.1
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: vite
• User Config: bridge, vite, nitro, alias, css, modules, experimental, build, head, plugins, components, buildModules, moment, axios, vue, router, serverHandlers, devServerHandlers, devServer, typescript
• Runtime Modules: @nuxtjs/[email protected], @pinia/[email protected]
• Build Modules: (), @nuxtjs/[email protected], @nuxt/[email protected]

Reproduction

Any Nuxt 2 project of Nuxt Bridge cannot extract css

Describe the bug

When the Nuxt 2 project was gradually upgraded using the bridge, it was found that after enabling Vite, all styles were style tags dynamically generated by JS and could not be extracted into separate css files. This caused the page to not display properly when loaded for the first time.

Additional context

No response

Logs

No response

[wattanx]

Have you tried vite.legacy: false?
ref: #1164

[medz]

@wattanx vite.legacy: false succeeded, but compared with the webpack package, the page still flickers and displays no style first. This problem will not occur after webpack packaging. Nuxt 3 will not have this problem either.

[medz]

So I think the vite issue still exists.

[wattanx]

It seems to work in a production build.
(npm run build && npm run start)
https://stackblitz.com/edit/github-yueotr

There may be a problem in the case of dev

[medz]

It seems to work in a production build. (npm run build && npm run start) https://stackblitz.com/edit/github-yueotr

There may be a problem in the case of dev

@wattanx
I think you should have noticed that although the style is successfully extracted, the application style still flickers.

You can try to use webpack to extract the style in the same way, and there will be no flickering.

[medz]

Rather than flickering, it should be a lag in enabling styles

[wattanx]

There seemed to be a flicker in the production build as well.
(I didn't notice it because it was fast).
It still behaves the same as Nuxt 3 in production mode.

We'll look into it, but it will take time.

memo:
In the case of webpack, the style is applied by SSR.
For vite, styles are not applied in SSR (same for Nuxt 3).

[medz]

@wattanx I think we should reopen it and revise the title.

Yes, you solve the problem of style flashing in #1308, but it has not solved the problem of flashing after Pord Build packaging.

My configuration:

export default defineNuxtConfig({
  ssr: true,
  sourcemap: true,
  bridge: {
    capi: true,
    vite: { legacy: true },
    nitro: true,
    meta: true,
    macros: { pageMeta: true },
  },
  vite: {
    css: {
      postcss: {
        plugins: [tailwindcss(), autoprefixer()],
      },
    },
  },
});

At present, this is the biggest reason that hinders me to continue to upgrade to Nuxt 3. Because there are a lot of dependence that needs to be upgraded. But this problem forced me to continue to use the webpack@v4, so I couldn't continue to gradually upgrade other contents.

[medz]

@wattanx
I only made a minimum replica: https://stackblitz.com/~/github.com/medz/github-avnkvf

[medz]

In addition, this seems to be the return of #561

[medz]

<template>
  <div>
    <h1>test</h1>
  </div>
</template>

<style>
h1 {
  color: red;
}
</style>

[medz]

For this purpose, I also created a minimal implementation for Nuxt 3. The behavior is essentially different. There is only one reason why Nuxt 3 is not present:

Nuxt 3 writes the style of pages or components to the html head, and Nuxt bridge does not do this.

This is why the page flickers after Nuxt bridge enables vite.

example: https://stackblitz.com/~/github.com/medz/github-8bvs9l

[medz]

This is the output after Nuxt bridge enables vite. There is no h1{color:red} style, and the style is applied in JS only after index.xxx.js is loaded.

This causes the flickering.

[wattanx]

Could you create a new issue? (I might miss it otherwise)

[medz]

Could you create a new issue? (I might miss it otherwise)

Yes 👉 #1334