FOUC when using Laravel + Vue + Inertia.js + SSR with Vite (SCSS) — CSS loads late

Hi everyone,

I’m using Laravel 10, Vue 3, Inertia.js v1, and SSR with Vite. My styles are written in SCSS and compiled via Vite.

When SSR is enabled, the initial HTML renders instantly, but there’s a noticeable flash of unstyled content (FOUC) before the SCSS-generated CSS is applied.

Here’s what I’ve noticed:

• Without SSR, styles load immediately and the page is rendered correctly.
• With SSR, the HTML appears right away, but the compiled CSS from SCSS seems to load only after the first paint.

How can I ensure that when using SSR with SCSS, the compiled CSS is included and applied with the initial HTML response so the page is styled immediately?

Thanks in advance