Execute load function on server side only

[mcmxcdev]

I need to do some web scraping and struggle with how the load method in Sveltekit is triggered both in server and client side.
Web scraping works fine on the server side, while the client side is throwing errors due to CORS issues naturally, which is expected.

Ideally, I would want the load function to run on server only, like: https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

I tried to work around it by using import { browser } from '$app/env'; but with an if condition for !browser I see the rendered data during server side, but then it gets removed from the page when client kicks in...

Any solution to this?

[geoffrich]

I believe load will always run on server and client, since it's used to both server-render and hydrate the page. If you want something to only run on the server, you should extract the logic into an endpoint and call that endpoint from the load method.

[mcmxcdev]

Oh, I didn't even think of that!
I will report back whether that solves the issue, thanks ;)

[LuvbCa]

turning of hydration only runs load on the server-side! Try using export const hydrate = false; ath the top of your module in your .svelte file.

[mcmxcdev]

Haven't had the chance yet to continue that codebase, but thanks for that suggestion, will try it!

[homerjam]

What about loading in layouts, I see the discussion in #4274 - is there a workaround right now?

[homerjam]

Answered my own question - I'm using session to prevent a double request

// hooks.ts
/** @type {import('@sveltejs/kit').GetSession} */
export function getSession(event) {
	return {
		apiToken: event.locals.apiToken,
		data: {},
	};
}

// __layout.svelte
<script context="module">
	/** @type {import('./__types/__layout').Load} */
	export async function load({ session }) {
		const artists =
			session.data.artists ||
			(
				await api({
					apiToken: session.apiToken,
					path: 'get-artists',
				})
			)[0].artists;
		session.data.artists = artists;

		return {
			props: {
				session,
				artists,
			},
		};
	}
</script>