Unexpected behavior with observable returned async

[m1212e]

In this page component:

<script lang="ts">
  import { authenticatedUser } from '$lib/api/auth.svelte';
  import { client } from '$lib/api/rumbleClient/client';
  import { get } from 'svelte/store';

  // value is present
  const user = await authenticatedUser();

  // this returns a promise which then resolves to an observable
  const conferenceData = await client.liveQuery.conferenceUsers({
    id: true
  }, user.id);

  // value is present on both, server and client side, this logs the array correctly in both consoles
  console.log(get(conferenceData));
  
  // if I add this, the values are correctly rendered during SSR AND in the browser
  // console.log($conferenceData);

</script>

<!-- If I add this, the nothing gets rendered during SSR and the browser then correctly shows the data  -->
<!-- {JSON.stringify($conferenceData)} -->

{#if !$conferenceData || $conferenceData?.length === 0}
<!-- this is redered in both SSR and browser when not adding one of the above snippets -->
  nothing found
{:else}
  {#each $conferenceData as c (c.id)}
    {c.id}
  {/each}
{/if}

I have observed some weird behavior. Based on where I subscribe to an observable returned by my async function, the data is present or not and I can't really get my head around why. It seems to me that the observable is not correctly subscribed somehow. Unfortunately I was not able to reproduce this issue in the REPL.

Does anyone know what could cause this? Thank you for your time!

[m1212e]

I made a small reproduction setup here: https://github.com/m1212e/sveltekit-store-issue-repro. See src/lib/data.ts and src/routes/+page.svelte

[brunnerh]

This sounds like it might either be a bug or not be supported.
Would recommend opening an issue.

[m1212e]

Did that, seems to be a bug. Thanks! #15119

[sunnypatell]

@m1212e this is a known edge case with svelte's store auto-subscriptions and async code during SSR.

when svelte compiles $store, it generates a component_subscribe() call at component initialization. the subscription is registered synchronously. but top-level await pauses the <script> block, and the $data auto-subscription in the template only gets wired after the script completes.

the timing:

1. const data = await dataGenerator() -- execution pauses
2. SSR tries to render the template before the subscription is established
3. $data returns the initial/empty value

adding console.log($data) forces the compiler to register the subscription earlier in the script block, before the template renders.

this is exactly why the svelte/no-store-async eslint rule exists. also related: svelte#10243 (timing differences between $store and get(store)).

fixes:

1. use get() for the SSR render:

<script>
  import { get } from 'svelte/store';
  const data = await dataGenerator();
  const initial = get(data);
</script>
{initial.id}

2. use sveltekit's load function instead of top-level await + stores (idiomatic approach):

// +page.ts
export async function load() {
  return { data: await fetchData() };
}

3. use {#await} blocks which handle the async lifecycle correctly.

option 2 avoids the async + store footgun entirely and is the recommended sveltekit pattern.