Load function re-runs on every navigation even if when I not intend it to

[Devr-pro]

When I navigate to page/route like from navbar (which has preload data attribute) it invalidates and re-runs the load function on every navigation, this is not actually what I want in some cases, (It happens even if my load function doesn't follow the cases where invalidation takes place automatically (mentioned in docs) ) , this actually makes fetch requests pending resulting slow navigation or delayed rendering of the page, What would be the cause here?, Thanks!

[geoffrich]

It's hard to say what the issue is without an example of the load function in question -- can you show some code?

[Devr-pro]

It's hard to say what the issue is without an example of the load function in question -- can you show some code?

 [/posts/+page.server.ts]

export const load: PageServerLoad = async ({ locals, depends,parent }) => {
	depends('login:post', 'update:posts');
	let parentdata=await parent()
	let client = locals.sbc;
	let { data: posts, error } = await client.from('datas').select('message,id,bookmarks,created_on').eq('userid',parentdata.session?.user.id);
	

	return {
		posts,
		error

	};
};


[/posts/+page.ts]

import type{PageLoad} from './$types';

export const load: PageLoad = async ({data}) => {
  
    return{
        posts: data.posts,
        error: data.error,

    }

    
};

@geoffrich
These are my load function of posts route, so whenever I navigate from root/home page I see a request in my network (dev tools) tab, because of this every time I navigate it waits to resolve that request and then renders my posts route. This results in laggy'sh experience

[richarddavenport]

You have a server load function and a client side load function. Not sure what you're expectation is. You could actually remove the posts/+page.ts file altogether and it will function the exact same.

[Devr-pro]

You have a server load function and a client side load function. Not sure what you're expectation is. You could actually remove the posts/+page.ts file altogether and it will function the exact same.

Yeah, actually I was just trying things out(exploring around about the data) , but it still doesn't solve my original problem

[joshiain]

I have the same issue. My load functions rerun on every navigation (e.g. clicking to a new route and back, or even hitting back in the browser). It's as though invalidate is called on every navigation even though I'm doing nothing to trigger an invalidation? Maybe dependencies aren't being tracked properly by SvelteKit?

An example of one of my load functions:

export const load = async ({ locals }) => {
  return {
    postData: db.getPostData(locals.user?.id)
  };
};

The only dependency is locals, and I've verified that nothing in locals is changing between navigations, but load still always reruns

[eltigerchino]

For myself, I use layout load functions to load data once for a group of routes. I think those only re-run when the layout is destroyed and mounted again or if a dependency changes.

[Devr-pro]

@s3812497 But then doesn't this load the unnecessary data for collective routes?, I mean it will load the data of the page that user has not even navigated to

[Devr-pro]

For myself, I use layout load functions to load data once for a group of routes. I think those only re-run when the layout is destroyed and mounted again or if a dependency changes.

Well, this doesn't solve the problem either, Is there really any solution or a issue needs to posted?

[eltigerchino]

You're right. There should definitely be a way for page load functions to only run once or revalidate every x seconds. Feel free to open an issue about this. Similarly there's been an ongoing issue about opting out of invalidation #6294. Is this what you're looking for?

Currently, I can only get it to run once by setting the cache-control header so the browser re-uses the cached response when sending another request to the server.
e.g.,

// +page.server.js
export const load = async ({ fetch, setHeaders }) => {
	const res = await fetch('/posts');
        if (!res.ok) return;
        setHeaders({ 'cache-control': 'max-age=3600' });
	return {
            posts: await res.json()
        }
};

[Devr-pro]

Yeah, setting cache-control is pretty cool but unfortunately we can't use it for sudden or realtime data changes, like when my user gets logged in or logged out it still uses staled/previously cached data for that interval which can be a bad ux imo

[richarddavenport]

I'd like to help, but it seems like maybe there is just a misunderstanding of how a route is invalidated or when load functions re-run. It would really help if you could spin up a repl or similar. I'm guessing there is just a misunderstanding and not a bug in SvelteKit, but I could be wrong.

[thomasqbrady]

I think the issue (and I only know this because a co-worker pointed it out when I did something similar) is that you're depending on locals in your load function's parameters. In Svelte-world, that means you're observing locals, which means your load method will be fired again each time locals changes (and since locals extends RequestEvent, it will change each time there's a new request)

[gregg-cbs]

Yeah its something that caught me off guard. Svelte load functions are reactive. They will re-run if the load function is referencing certain params from the load function context such as: url, locals and probably some others. Which for a load function is not expected so it is strange behaviour but in some cases i have used it for filtering data by updating the url query params and it works well.

[eltigerchino]

More details in this part of the docs
https://kit.svelte.dev/docs/load#rerunning-load-functions

[benjamindedonder]

Hey, I wanted to reference my discussion (#13074) here, because I think I might be having the same issue as you guys.

I think any page load function is always rerun when navigating from a different page. Only the result of shared layout load functions are reused and not rerun if their dependencies did not change.

The result of page load functions is only reused (at least I think) when the user navigates to a different route which renders the same dynamic page. For example in the example in the documentation they mention the user navigating from /blog/trying-the-raw-meat-diet to /blog/i-regret-my-choices, which are two different routes rendering the same dynamic page.

Although it's not clear to me from the documentation, so I'm hoping someone in the know can confirm this hypothesis. At least you can check out my discussion to see my workaround: caching data in the browser.