Remote function query with await blocks page load in svelte:boundary when query is stored as local variable.

[dil-zgaal]

Describe the bug

when query is stored as a variaible in the script, the page load is blocked until the query completes.
For example in the below sample I'd expect to see the loading on the client "immediately" and after 5 sec, the data should be displayed.

Instead of this, the page is not served by the server for 5 seconds, than it gets data almost immediatelly.
On the other hand using the 'queryData()' within the markup works as expected.

Reproduction

<script lang="ts">
	import {queryData} from "./data.remote"
	const data = queryData();
</script>

<svelte:boundary>
	{#snippet pending()}
		loading
	{/snippet}
	
	{#snippet error()}
	error
	{/snippet}

	{await data}
</svelte:boundary>

import { query } from '$app/server';

export const queryData = query(async (): Promise<string> => {
  await new Promise((resolver) => setTimeout(resolver, 5000));
	return "data"
});

Logs

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 12.51 GB / 31.76 GB
  Binaries:
    Node: 22.20.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.5.2 - C:\Users\zgaal\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Chrome: 143.0.7499.193
    Edge: Chromium (143.0.3650.66)
    Firefox: 147.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/adapter-auto: ^7.0.0 => 7.0.0
    @sveltejs/adapter-cloudflare: ^7.2.5 => 7.2.6
    @sveltejs/kit: ^2.50.1 => 2.50.1
    @sveltejs/vite-plugin-svelte: ^6.2.4 => 6.2.4
    svelte: ^5.46.4 => 5.48.0
    vite: ^7.3.1 => 7.3.1

Severity

serious, but I can work around it

Additional Information

No response

[teemingc]

I think the boundary needs to be above the component the query is in

[dummdidumm]

Haven't confirmed but pretty sure we're awaiting all the collected remote functions before rendering. Not sure we can change that without breaking other things, but even if we did this pattern would just result in a needless request on the server (because it will not be used on the client)

[dil-zgaal]

I know nothing about the internals of remote functions, but I'd expect only the awaited remote functions are blocking in the script and the above blocking nature was quite a surprise for me. If it is not possible to make it non-blocking on the server side, it should be documented and provide some workaround to avoid the blocking nature.

Having the boundary a component above makes the refresh and query logic separated. For example having a table to show the data and a refresh button in case of an error requires both the boundary and the actual table component to manage the remote function.

[elliott-with-the-longest-name-on-github]

@dummdidumm that seems bad

it basically means streaming SSR (when it happens) won't work on SvelteKit until we fix this