I have a Blazor Web App hosted on a Linux server with NGINX, and I am experiencing a Flash of Unstyled Content (FOUC) issue that only occurs when loading a page for the first time.
Problem:Upon the first page load, the HTML is displayed without any applied CSS. It takes a brief moment for the CSS to load, and during that time, the HTML appears unstyled, resulting in a poor user experience. However, when I navigate to the same page again later, everything is styled correctly since the CSS is already cached in the browser.
It seems that the CSS is not immediately loaded but only after the page has already been rendered. This problem only occurs during the first page load; on subsequent visits, the issue no longer exists.
Setup:Blazor Web App (ASP.NET Core 8, Blazor WebAssembly with Server-Side Rendering)
Linux server with NGINX and Let's Encrypt for SSL
.NET 8 and ASP.NET Core 8 (Server-Side Rendering, not Blazor WebAssembly)
CSS is loaded from an external file and should be fully available before the first page render.
All static files (CSS, JS) are served via NGINX.
Symptoms:FOUC (Flash of Unstyled Content) – The page initially loads without CSS, and after a brief delay, it is correctly styled.
Only on the first visit to the page – The issue occurs when the page is first loaded. On subsequent visits, it no longer happens (since the CSS is cached in the browser).