Trying to use Directus SDK code in Sveltekit load function

Question

I hope I can find an answer to my issue.

I am building a site using sveltekit for the frontend and directus for the backend. I have tested bringing in data from Directus using the directus SDK code in the sveltekit +page.svelte script tags. This was using an onmount and things work but its all client side and I need this to work server side dor SEO.

So I switch tactic and put all the code I had in the onmount and put into a +page.ts so that it renders by server. When I console log, I can see the data from the load function works but I cant display it in my page.

initial code that works on the +page.svelte:

import type { PageData } from './$types';
import { client } from "$lib/config/init";
import Hero from "$lib/core/hero.svelte";
import { onMount } from "svelte";
import { readSingleton, readItems, createDirectus } from '@directus/sdk';
onMount(async () => {
while (!loginCompleteValue) {  
await new Promise(resolve => setTimeout(resolve, 1000));
 }
try {
landingPageData = await client.request(readSingleton('FrontPage'));
console.log('Front page data direct:', FrontPage);
projectData = await client.request(readItems('project'));

this will bring data in and I have used this basic pattern for 3 projects. So now I moved this call to a +page.ts file:

import { client } from "$lib/config/init";
import { readSingleton } from '@directus/sdk';

export async function load({ fetch }) {
    let landingPageData: any = null;
  
    try {
      landingPageData = await client.request(readSingleton('FrontPage'));
  
      console.log('landingPageData:', landingPageData); // Add this line
  
      return {
        props: {
          landingPageData: landingPageData
        }
      };
    } catch (error) {
      console.error('Error fetching data:', error);
      return {
        error: new Error('Failed to fetch front page data')
      };
    }
  }

this shows the data is loading from the load function but when I try bringing it into the page it logs as "undefined" and somehow the data is not making it into the front or there is a delay happening before rendering:

// src/routes/+page.ts
import { client } from "$lib/config/init";
import { readSingleton } from '@directus/sdk';

export async function load({ fetch }) {
    let landingPageData: any = null;
  
    try {
      landingPageData = await client.request(readSingleton('FrontPage'));
  
      console.log('landingPageData:', landingPageData); // Add this line
  
      return {
        props: {
          landingPageData: landingPageData
        }
      };
    } catch (error) {
      console.error('Error fetching data:', error);
      return {
        error: new Error('Failed to fetch front page data')
      };
    }
  }

and the code that displays the page is:

import type { PageData } from './$types';
import { client } from "$lib/config/init";
import Hero from "$lib/core/hero.svelte";
export let landingPageData: PageData;
console.log('landingPageData:', landingPageData);

and this wont work. But whats surprising is when i uncomment the onmount then the data from the load works! I am very confused as to why?