fix: dev ssr fouc

src/dev-bundler.ts

@@ -185,5 +185,8 @@ async function __instantiateModule__(url, urlStack) {
     `module.exports = function (...args) { return __ssrLoadModule__('${entryURL}').then(i => i.default(...args)) }`
   ].join('\n\n')
 
-  return { code }
+  return {
+    code,
+    ids: chunks.map(i => i.id)
+  }
 }

src/manifest.ts

@@ -129,26 +129,19 @@ export async function stubManifest (ctx: ViteBuildContext) {
   await writeServerManifest(serverManifest, ctx.nuxt.options.buildDir)
 }
 
-export async function generateDevSSRManifest (ctx: ViteBuildContext) {
-  const rDist = (...args: string[]): string => resolve(ctx.nuxt.options.buildDir, 'dist', ...args)
-
-  const ssrManifest = await readJSON(rDist('server/ssr-manifest.json'))
-  const css = Object.keys(ssrManifest).filter(isCSS)
-
+export async function generateDevSSRManifest (ctx: ViteBuildContext, css:string[] = []) {
   // renderer does not respect `publicPath` and will always append `/_nuxt/`,
   // add this as an temporary workaround
-  const fixedCss = css.map(i => `../${i}`)
+  const fixedCss = css.map(i => `..${i}`)
+  const modules = [
+    'empty.js',
+    ...fixedCss
+  ]
 
   const clientManifest = {
     publicPath: '',
-    all: [
-      'empty.js',
-      ...fixedCss
-    ],
-    initial: [
-      'empty.js',
-      ...fixedCss
-    ],
+    all: modules,
+    initial: modules,
     async: [],
     modules: {},
     assetsMapping: {}

src/server.ts

@@ -9,6 +9,7 @@ import { wpfs } from './utils/wpfs'
 import { jsxPlugin } from './plugins/jsx'
 import { generateDevSSRManifest } from './manifest'
 import { bundleRequest } from './dev-bundler'
+import { isDevCSS } from './utils'
 
 export async function buildServer (ctx: ViteBuildContext) {
   // Workaround to disable HMR
@@ -90,13 +91,14 @@ export async function buildServer (ctx: ViteBuildContext) {
 
   // Generate manifest files
   await writeFile(resolve(ctx.nuxt.options.buildDir, 'dist/server/ssr-manifest.json'), JSON.stringify({}, null, 2), 'utf-8')
-  await generateDevSSRManifest(ctx)
+  await generateDevSSRManifest(ctx, [])
 
   // Build and watch
   const _doBuild = async () => {
     const start = Date.now()
-    const { code } = await bundleRequest(viteServer, '/.nuxt/server.js')
+    const { code, ids } = await bundleRequest(viteServer, '/.nuxt/server.js')
     await writeFile(resolve(ctx.nuxt.options.buildDir, 'dist/server/server.js'), code, 'utf-8')
+    await generateDevSSRManifest(ctx, ids.filter(isDevCSS))
     const time = (Date.now() - start)
     consola.info(`Server built in ${time}ms`)
     await onBuild()

src/utils.ts

@@ -9,6 +9,7 @@ const IS_JS_RE = /\.[cm]?js(\?[^.]+)?$/
 const IS_MODULE_RE = /\.mjs(\?[^.]+)?$/
 const HAS_EXT_RE = /[^./]+\.[^./]+$/
 const IS_CSS_RE = /\.css(\?[^.]+)?$/
+const IS_DEV_CSS_RE = /\.(?:css|scss|sass|postcss|stylus|styl)(\?[^.]+)?$/
 
 export function isJS (file: string) {
   return IS_JS_RE.test(file) || !HAS_EXT_RE.test(file)
@@ -22,6 +23,16 @@ export function isCSS (file: string) {
   return IS_CSS_RE.test(file)
 }
 
+export function isDevCSS (file: string) {
+  return IS_DEV_CSS_RE.test(file)
+}
+
+export function rewriteDevCSS (file:string) {
+  if (file.endsWith('.css')) { return }
+  if (file.includes('?')) { return file + '&mock.css' }
+  return file + '?mock.css'
+}
+
 export function hashId (id: string) {
   return '$id_' + hash(id)
 }