Is fallback prop necessary for suspense?

I tried to simplify this example as much as I can:

The provided code will render

userData()

userData()

about 50% of the time when refreshing. The other 50% it seems to just be an empty string

My understanding is that Suspense should be used whenever you access an object from

createAsync

createAsync

. I can confirm the data is being fetched correctly on the server from server logs.

It seems to only repro when running on a production server (in this case, cloudflare pages) but when I run locally there is no issue with this. When I add the fallback prop to the suspense tag, it looks like it renders 100% of the time

I'm a bit new to SSR so please feel free to correct any misunderstandings I have with this.

import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";
import { getSBUser } from "~/utils/supabase/auth";

const getUser = query(async () => {
    "use server";
    const { data, error } = await getSBUser();

    return data;
}, "user");

export default function Test() {
    const userData = createAsync(() => getUser());

    return (
        <>
            {/* this suspense does not eventually show the user data even though I can confirm it resolves from a server log */}
            <Suspense>
                <pre>{JSON.stringify(userData(), null, 2)}</pre>
            </Suspense>
        </>
    );
}

import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";
import { getSBUser } from "~/utils/supabase/auth";

const getUser = query(async () => {
    "use server";
    const { data, error } = await getSBUser();

    return data;
}, "user");

export default function Test() {
    const userData = createAsync(() => getUser());

    return (
        <>
            {/* this suspense does not eventually show the user data even though I can confirm it resolves from a server log */}
            <Suspense>
                <pre>{JSON.stringify(userData(), null, 2)}</pre>
            </Suspense>
        </>
    );
}

SolidJS•7mo ago•

2 replies

MintyKong

Is fallback prop necessary for suspense?

I tried to simplify this example as much as I can:

The provided code will render

userData()

userData()

about 50% of the time when refreshing. The other 50% it seems to just be an empty string

My understanding is that Suspense should be used whenever you access an object from

createAsync

createAsync

import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";
import { getSBUser } from "~/utils/supabase/auth";

const getUser = query(async () => {
    "use server";
    const { data, error } = await getSBUser();

    return data;
}, "user");

export default function Test() {
    const userData = createAsync(() => getUser());

    return (
        <>
            {/* this suspense does not eventually show the user data even though I can confirm it resolves from a server log */}
            <Suspense>
                <pre>{JSON.stringify(userData(), null, 2)}</pre>
            </Suspense>
        </>
    );
}

import { createAsync, query } from "@solidjs/router";
import { Suspense } from "solid-js";
import { getSBUser } from "~/utils/supabase/auth";

const getUser = query(async () => {
    "use server";
    const { data, error } = await getSBUser();

    return data;
}, "user");

export default function Test() {
    const userData = createAsync(() => getUser());

    return (
        <>
            {/* this suspense does not eventually show the user data even though I can confirm it resolves from a server log */}
            <Suspense>
                <pre>{JSON.stringify(userData(), null, 2)}</pre>
            </Suspense>
        </>
    );
}

Is fallback prop necessary for suspense?

Similar Threads

Is fallback prop necessary for suspense?

Similar Threads

Similar Threads

Similar Threads