awaiting a remote function in a component script for no-JS SSR prerendering?

[sevmonster]

I want to optionally allow clients to continue using the app without JavaScript, and this necessitates preloading all otherwise dynamic data during SSR. I thought I could do this by simply awaiting the remote function calls that I would otherwise use to gather the data, during component initialization. I tried the following:

<script>
import { browser } from "$app/env"
import { noJS } from "somePackage"

const { someProp, ...restProps } = $props()
const myData = $derived(myRemoteFunc(someProp))
if (!browser && noJS)
    await myData
</script>

But, the async here does not block and the object still reports that the call is loading.

I learned later that remote functions like this are not generally resolvable outside reactive scope due to caching, so I tried this:

const myPreloadedData = $derived(await myData)

This does work! But if I try to make it conditional, so that it only awaits with no JS:

const myPreloadedData = $derived((!browser && noJS) ? (await myData) : myData)

then myPreloadedData will always resolve, even if the conditional does not pass, and further (both synchronous and reactive) references to myPreloadedData will be the results of the remote function.

I tried a few more permutations and ended up with mixed results.

I think some of this may be buggy? I am not sure if so necessarily or if I'm running into expected quirks of the system, and I'd like to know what I can do to accomplish my goals.

I am using the latest SvelteKit 2. Async features are enabled of course.

[abhiishek340]

I reproduced this on SvelteKit 2.70.3 / Svelte 5.57.1 with experimental.async and remoteFunctions enabled. Two things are going on.

1. Why the conditional always resolves

A $derived that contains await is evaluated like an async function, and remote query objects are thenables (they have a .then). When an async function returns a thenable, JavaScript adopts it, so cond ? await myData : myData resolves to the data in both branches. Plain JS shows the same thing:

const q = { then: (resolve) => resolve('DATA') };
const f = async (cond) => (cond ? await q : q);
await f(false); // 'DATA', not q

If you really need a conditional, wrap the branches so the non-awaited one isn't a thenable:

const result = $derived(cond ? { data: await myData } : { query: myData });

2. You probably don't need the conditional at all

Await unconditionally, either with $derived(await myData) in the script or directly in the markup:

<p>{await getData(id)}</p>

During SSR this renders the resolved value, so the HTML works without JS. SvelteKit also serializes the result into the page (__sveltekit_….data = { q: { "…/getData/…": { v: … } } }), and on hydration the client reuses it. Loading the page in a browser made no request to the remote function, so JS clients don't pay for a second round-trip.

On your first attempt (if (!browser && noJS) await myData): awaiting there resolves the promise but doesn't populate myData.current during SSR. My repro rendered loading=true current=undefined, which matches what you saw.

(Small aside: the module is $app/environment, not $app/env.)

[giaBaoJS]

You don't need the noJS branch at all. Just await it unconditionally:

<script>
  const { someProp } = $props()
  const myData = $derived(myRemoteFunc(someProp))
  const value = $derived(await myData)
</script>

During SSR the render waits for the query, so the HTML already has the data, and the result is serialized into the page. When JS is on, hydration reads it from that cache instead of calling the server again. I tried this on kit 2.70.3: one server call per page load, zero remote requests from the browser after hydration, and the same HTML with JS off. You can still keep myData around for .refresh() etc. on the client.

Both things you ran into are expected:

The bare if (!browser && noJS) await myData does wait, but on the server a query's .loading and .current are hardcoded to true and undefined (see create_query_resource in src/runtime/app/server/remote/query.js). Only the awaited value is meaningful during SSR.

The ternary always resolves because any await inside $derived(...) turns the whole expression into an async function, roughly async () => cond ? await myData : myData. Returning a thenable from an async function resolves it, and a query is a thenable, so you get the value in both branches.

Docs: https://svelte.dev/docs/kit/remote-functions#query and https://svelte.dev/docs/svelte/await-expressions

(Small thing: it's $app/environment, not $app/env.)