No Style/CSS on initial load with SvelteKit and adapter-static

Question

I created a little page with sveltekit and tailwind css. Now I want to use the sveltejsadapter-static to create a complete static html version. This works fine for all subpages like /imprint or /privacy but the the first page / doesn't load the stylesheet.

Here's my svelte.config.js

import adapter from '@sveltejs/adapter-static';

const config = {
    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: null,
            precompress: false
        }),
        trailingSlash: 'always',
        prerender: {
            default: true
        }
    },
};

export default config;

By browsing to /imprint all styles look fine. The link to the stylesheet starts with /_app/…

When I load the base url, I can see the correct styles flashing for some milliseconds, but after that, all styles are gone. If I remove the / of the style and js links in the source code (_app/…), the page looks fine. But I can't find an option to create the first index file without the staring slash.

Also strange: When I click on the logo from /imprint (which links to /), the page looks fine, but never on first load.

ouflak · Accepted Answer · 2022-03-15 20:23:13Z

1

Found the solution.

I defined the html tag in a component which is already defined in the app.html.

<svelte:head>
  <html lang="de" />
</svelte:head>

edited Mar 15, 2022 at 20:23

ouflak

2,56310 gold badges46 silver badges53 bronze badges

answered Mar 15, 2022 at 12:52

agssl

1532 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shellking4 Over a year ago

Can you explain this more please? I'm having the same issue. But I don't quite understand your solution

NosiaD · Accepted Answer · 2023-12-06 06:40:13Z

0

Seems no one answers this, I'll just draft my experience and solution for this.

If you're using adapter-static + ssr + prerender, you can use onMount() or detect if loaded in browser before rendering the slot, this should solve the initial rendering.

// inside your +layout.svelte
<script>
    import { browser } from '$app/environment';
</script>

{#if browser}
    <slot />
{/if}

answered Dec 6, 2023 at 6:40

NosiaD

5971 gold badge6 silver badges20 bronze badges

1 Comment

skillz21 Over a year ago

Would requiring JS to render the site half defeat the purpose of SSR by negatively impacting SEO?

Collectives™ on Stack Overflow

No Style/CSS on initial load with SvelteKit and adapter-static

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related