createServerData$ question

import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
import { Show } from "solid-js";
import { sleep } from "~/lib/utils";
type Test = {
    a: string;
};
export function routeData() {
    console.log("getting route data");
    return createServerData$(async () => {
        await sleep(2000);
        const t: Test = { a: "hello" };
        return t;
    });
}

export default () => {
    // const params = useParams();
    const data = useRouteData<typeof routeData>();
    data(); // <== Page won't update unless call data here.
    return (
        <Show when={!data.loading} fallback={<div>loading...</div>}>
            <div>test-page</div>
            <pre>{data()?.a}</pre>
        </Show>
    );
};