CODEWITHSUNDEEP
staticsveltesveltekitstatic-site-generation
Friedrich Siever
Friedrich Siever

Reputation: 479

How to prevent redundant data fetching script (application/json) in static adapter-generated HTML?

I'm using SvelteKit to build a static website with the static adapter for server rendering. I've noticed that in the generated HTML files, there's a script that fetches the same data that's already included in the page. For example, if I have a page listing blog posts and I fetch the posts data in the server-side load function, SvelteKit still includes a script to fetch the same data when rendering the HTML.

In my +page.ts file I am doing the following:

import type { Post } from '$lib/types';

export async function load({ fetch }) {
    const response = await fetch('../api/posts');
    const posts: Post[] = await response.json();
    return { posts };
}
export const prerender = true;

I'm confused about the purpose of this redundant script and whether it's necessary for static sites where all the data is pre-rendered. Is there a way to configure SvelteKit or the static adapter to prevent this redundant data fetching script from being included in the HTML output?

<script type="application/json" data-sveltekit-fetched data-url="/api/posts">
    {"status:200, ... all the data ... 
</script>

Any insights or suggestions on how to address this issue would be greatly appreciated. Thanks in advance!

Upvotes: 3

Views: 89

Answers (1)

brunnerh
brunnerh

Reputation: 185200

My suspicion is that this is part of client-side routing/rendering.
You could try turning that off:

// +page.ts / +layout.ts
export const csr = false;

Docs

You will get harder page transitions:

Links are handled by the browser with a full-page navigation.

Upvotes: 2

Related Questions