I’m working on a SvelteKit app where I need to conditionally load one of two components, Comp1 or Comp2, based on server-side logic. Here’s a simplified overview of my setup:

+page.svelte:

<script lang="ts">
  import Comp1 from "$lib/components/Comp1.svelte";
  import Comp2 from "$lib/components/Comp2.svelte";
  export let data;
</script>

{#if data.number == 1}
  <Comp1 text="1" />
{:else}
  <Comp2 text="2" />
{/if}

+page.server.ts

export function load({ params }) {
  return { number: Math.floor(Math.random() * 2) + 1 }; // Return 1 or 2
}

I want to optimize loading by avoiding the inclusion of both components if only one is needed, but I want to steer clear of dynamic imports due to their impact on load time and potential UI flicker.

Is there a strategy in SvelteKit that allows for component preloading based on server data, or any best practices to ensure only the necessary component is loaded?