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

Question

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!

load in +page.ts runs on server and client, only +page.server.ts is restricted to the server. — brunnerh
– brunnerh, Commented May 9, 2024 at 9:46

brunnerh · Accepted Answer · 2024-05-09 09:45:45Z

2

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.

answered May 9, 2024 at 9:45

brunnerh

188k30 gold badges362 silver badges434 bronze badges

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

1 Comment

Friedrich Siever Over a year ago

Thanks a million. You are totally right. Unfortunately, setting csr = false breaks all page transitions, and this is not my goal. However, I've found that removing the script from the built HTML actually works fine for CSR. It seems that this script is not needed for CSR at all. I'm still puzzled as to why SvelteKit includes both the script in the HTML and the "static" endpoint api/posts for CSR, as the information appears to be redundant. On content-heavy pages, loading a huge amount of files and data to the server is not ideal.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related