CODEWITHSUNDEEP
sveltekit
Teun
Teun

Reputation: 85

SvelteKit split second unstyled html

I created an base app though the sveltekit cli commands. The options I chose are scss and typescript. At soon as I started the application for a split second I saw unstyled html. This happens every time and with every project i create. I did some testing and it seems like the css(app.scss) is loaded after the html(localhost). Another this that seems consistent is that is happens every time i reload the page, but not with navigating. This indicates that it is probably server-side. In my mind the html and css should load in the same file, though SvelteKit might have a different approach.

Foto of network requests

I had the same issue with Sapper and solved that. But I forgot how I fixed it. Also with the new SvelteKit setup many things are different. Do you guys know how to fix this?

Thanks in advance

Upvotes: 3

Views: 1734

Answers (1)

Leftium
Leftium

Reputation: 17903

SvelteKit does not bundle everything together during development mode and injects support for HMR. This may result in flashes of unstyled content.

The flashes of unstyled content should go away in production mode, when you deploy with an adapter.

This stock SvelteKit template does not flash unstyled content. The only change was changing the adapter from the node adapter to the static adapter so it could be hosted on Netlify. (I have also confirmed with the Netlify adapter, so it's not a difference between static and dynamic.)

How to test with the stock SvelteKit template:

npm init svelte@next
yarn
yarn dev --open  # Dev server: flashes of unstyled content.

yarn build
cd build
node index.js    # Production server: no flashes of unstyled content.

Explanation from SvelteKit announcement:

Right now, we're seeing the rise of the unbundled development workflow, which is radically simpler: instead of eagerly bundling your app, a dev server can serve modules (converted to JavaScript, if necessary) on-demand, meaning startup is essentially instantaneous however large your app becomes.

...

That's not to say we're abandoning bundlers altogether. It's still essential to optimise your app for production, and SvelteKit uses Rollup to make your apps as fast and lean as they possibly can be (which includes things like extracting styles into static .css files).

Upvotes: 3

Related Questions