CSS not being injected while SSR when component is loaded via <Suspense />
I am not sure if this is expected or a bug or if I am doing something wrong. Basically I am loading a component via Reacts lazy Suspense and the component gets rendered on the server fine (it's content is in the HTML when requested via cURL for example) but the corresponding CSS File is not injected in the head which causes a flicker because the css loads only after the JS is hydrated and requests the css.
Repro URL: https://tanstack-suspense-css-flicker.vercel.app/ (Title, Subline + Button flash on the top right and only then move to the center when CSS is hydrated)
Repro Repo: https://github.com/dunklesToast/tanstack-suspense-css-flicker
Expected result (without Suspense): https://tanstack-suspense-css-flicker.vercel.app/no-suspense
GitHub
GitHub - dunklesToast/tanstack-suspense-css-flicker
Contribute to dunklesToast/tanstack-suspense-css-flicker development by creating an account on GitHub.
5 Replies
deep-jade•2w ago
not sure how that would be possible at all
maybe with RSCs
btw, please post in #start-questions for start related topics
solid-orangeOP•2w ago
ah sorry, selected the wrong channel because I was looking for possible solutions in both. Not sure if this can be moved?
I've now came around with a custom injector which injects the built CSS files into the head (read from the vite ssr manifest):
https://github.com/dunklesToast/tanstack-suspense-css-flicker/blob/e5414291ae099d11431bfb846437aef75f09c660/src/routes/index.tsx
https://github.com/dunklesToast/tanstack-suspense-css-flicker/blob/e5414291ae099d11431bfb846437aef75f09c660/src/ssrCssInjector.ts
doesn't yet work on the vercel deployment - probably because the manifest is missing there - but works great locally after a build. I guess this solves my issue now but would you "recommend" an approach like this?
Maybe to explain what I am trying to do: I am building a CMS System and get the used blocks from a server api. For performance reasons I wanted to lazy load only required components for the specific page instead of all components. Is there a better way to do that or is lazy the way to go?
deep-jade•2w ago
hm i think we would rather need to provide a custom wrapper around React.lazy that tracks what is rendered on the server
cc @Katja (katywings)
solid-orangeOP•2w ago
That would probably also work - but I guess that needs to be done on TanStacks Side and be provided by the framework an I cannot implement that in my codebase, right?
robust-apricot•2w ago
Thank you for the mention 😁. Just for a quick status update on the progress with SolidStart Devinxi: we are currently conceptualizing a public manifest API that can be used by
lazy wrappers exactly for these CSS SSR use cases. My solid lazy wrapper solid-lazy-plus already has an experimental branch using the new API https://codeberg.org/lufrai/solid-lazy-plus/pulls/2/files#diff-c5fb850250c7443c48a6c12b5cf6916773da31f1.
Plus I am working on a more radical overhaul of the CSS injection logic, which is also still ongoing: https://github.com/solidjs/solid-start/pull/1965.
Maybe - hopefully - once this work is finalized, parts of it can be made framework agnostic and extracted into a codebase usable by TanStack Start and SolidStart 🤔