S
SolidJS•2w ago
PauloMFJ

Cloudflare Worker x Route Pre-rendering

I have the following setup: Page: 
const getWorkData = query(async () => {
    "use server";

    try {
        const data = await sanityFetch<TypePageWork>(QUERY_PAGE_WORK);
        if (!data) throw new Error("Fetch returned 'null'.");
        return data;
    } catch (error) {
        console.error("Failed to fetch work data - redirecting to /404.", error);
        throw redirect("/404");
    }
}, "work");

export const route = {
    preload: () => getWorkData(),
} satisfies RouteDefinition;

const Page = () => {
    const data = createAsync(() => getWorkData(), {
        initialValue: null,
        deferStream: true,
    });

    return <Show when={data()}>{(d) => <PageWork data={d()} />}</Show>;
};

export default Page;
const getWorkData = query(async () => {
    "use server";

    try {
        const data = await sanityFetch<TypePageWork>(QUERY_PAGE_WORK);
        if (!data) throw new Error("Fetch returned 'null'.");
        return data;
    } catch (error) {
        console.error("Failed to fetch work data - redirecting to /404.", error);
        throw redirect("/404");
    }
}, "work");

export const route = {
    preload: () => getWorkData(),
} satisfies RouteDefinition;

const Page = () => {
    const data = createAsync(() => getWorkData(), {
        initialValue: null,
        deferStream: true,
    });

    return <Show when={data()}>{(d) => <PageWork data={d()} />}</Show>;
};

export default Page;
Config: 
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
    server: {
        prerender: { crawlLinks: true },
        preset: "cloudflare-module",
        cloudflare: {
            deployConfig: true,
            nodeCompat: true,
        },
    },
});
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
    server: {
        prerender: { crawlLinks: true },
        preset: "cloudflare-module",
        cloudflare: {
            deployConfig: true,
            nodeCompat: true,
        },
    },
});
Issue: When running locally this works as expected and routing to the page works fine. However when I run a build and subsequent wrangler dev things start to behave strange; If I visit the example page directly it correctly serves the page from the pre-rendered build. Whereas if I land on a different page then route to the example page the app then attempts to run getWorkData on the client which fails. I've tried all sorts of things but no bueno. Can anyone guide me as to why getWorkData ever is called on client after pre-rendering? Don't understand why if I'm running SSG and I can see that the data is correctly output in the build folder / correctly served when visited why does the fetch still get called on subsequent routes? Is there a way to force pre-rendered pages to only ever retrieve data from the generated build?
1 Reply
Brendonovich
Brendonovich•2w ago
Start only uses SSR for the initial page load, whether that's prerendered or dynamic. Subsequent navigations will happen on the client, though since you're using use server that should still work since the client should be running your cf worker

Did you find this page helpful?