CSS from lazy client components not included in SSR (FOUC)

[hi-ogawa]

Description

CSS from lazy-loaded client components is not included in the SSR response, causing a flash of unstyled content (FOUC).

Test Cases (PR #1056)

Case	@js	@nojs	Status
Case 1: client → lazy client → CSS	CSS loads after hydration (FOUC)	CSS not applied	❌
Case 2: server → lazy client with CSS	✅	✅ CSS in SSR	✅
Case 3: server → lazy server with CSS	✅	✅ CSS in SSR	✅

Case 1: client → lazy client → CSS

// client-to-client.tsx
'use client'
import * as React from 'react'

const LazyChild = React.lazy(() => import('./client-to-client-child'))

export function TestLazyCssClientToClient() {
  return (
    <React.Suspense fallback={<span>loading...</span>}>
      <LazyChild />
    </React.Suspense>
  )
}

// client-to-client-child.tsx
import './client-to-client-child.css'
export default function ClientToClientChild() {
  return <span className="test-lazy-css-client-to-client">content</span>
}

Issue: CSS is not included in SSR. With JS, CSS loads after hydration (FOUC). Without JS, CSS never applies.

Related

• FOUC in dynamically imported components wakujs/waku#1911