Flash Of Unstyled Content On SSR

Hello,

I am working on an app using Laravel 10, Vue 3, Sass Inertiajs with SSR and I am experiencing flash of unstyled content. When I first load my page, everything is unstyled and then it gets styled.

Any idea on how to fix this?

Thank you.

JussiMannisto

1 year ago

Level 50

It's hard to say what's wrong without seeing the code. But it sounds like the style sheets aren't loaded on the first rendering pass. Some questions to start:

Where are you experiencing this error: is it a live server or a local dev server?
If it's a live server, do you see <link> tags with a rel="preload" attribute in the HTML source? These should be automatically added by Vite.
Are you loading style sheets or fonts from a CDN?
Which HTTP protocol is your server using; 1.1, 2, or 3? You can check this from the Chrome developer tools, under the Network tab in the Protocol column (refresh the page if needed).

If you're not already using the AddLinkHeadersForPreloadedAssets middleware, I recommend trying it out. It sends critical asset links in a response header, so the browser can start loading them even before receiving the response body. Just be aware that this can significantly increase the response header size, and you might need to adjust some server settings, such as fastcgi_buffer_size in Nginx.

1 like

k_nadam

1 year ago

Level 1

@JussiMannisto I understand. unfortunately I am not able to locate the exact problem. but here are the answers to the questions:

Local dev server
Some external styles for packages are loaded via CDN

I am not using AddLinkHeadersForPreloadedAssets

Please or to participate in this conversation.