How to handle CSS preloading for Client Components in an RSC + SSR setup?

Cong-Cong Pan — Thu, 16 Apr 2026 03:31:49 +0000

Hi everyone,

I've been diving deep into custom React Server Components (RSC) and Server-Side Rendering (SSR) implementations, and I've run into a frustrating issue regarding CSS management for Client Components.

When using the renderToReadableStream API to render Server Components, we can pass a clientManifest (or module map) so the browser knows exactly which JavaScript resources to load for the Client Components. This handles the JS side perfectly.

However, I haven't been able to find a built-in solution or a clear pattern for handling the CSS resources associated with those Client Components—essentially, there seems to be no standard equivalent to a preinitCssForSSR approach.

The Problem

Because there is no explicit way to map and pre-initialize the CSS assets during the RSC -> SSR pass, the styles aren't immediately available when the HTML is sent to the client.

When the Client Component ultimately hydrates and renders in the browser, the stylesheet has to be fetched/applied post-render, which causes a highly noticeable Flash of Unstyled Content (FOUC).

My Questions for the Community:

How are you handling CSS asset mapping for Client Components in a custom RSC setup?

Is there a specific bundler plugin (Webpack/Vite) or a manifest-generation strategy you use to extract these CSS dependencies and inject them as tags in the initial SSR HTML?

Are there any undocumented APIs or established community patterns to achieve a preinitCssForSSR effect?

Any insights, architectural advice, or code snippets would be hugely appreciated. Thanks in advance!

Forem: Cong-Cong Pan

How to handle CSS preloading for Client Components in an RSC + SSR setup?