Can I create a resource that only fetches at client side?

[yume-chan]

By using createResource, Solid Start will run the fetcher at both server and client side. But sometimes the resource is not available at server side, for example it uses WebUSB or WebHID API to interact with local devices, or it access a resource in the intranet.

I can return undefined when isServer is true, and calling refetch in onMount. However it requires much more code to handle the undefined values.

Can I create a resource that, during SSR, is always loading, so <Suspense>s will render their fallbacks, and during client-side rendering, it starts fetch immediately (start with loading state)?

[ryansolid]

Hmm.. not that I can think of. Suspense expects resolution. So for it to Suspend on the server means it expects the server to resolve at some point. And trying to do something clever with chaining probably won't work because hydration has to match. No it couldn't use the same Suspense mechanism.

However there is a solution if you don't want that section to render anyway I'd consider using clientOnly. It can have its own fallback and then you can have it render its own Suspense client-side inside which will handle the resource loading.

[lxsmnsyc]

Wouldn't the source being falsy should work?

[ryansolid]

But that wouldn't hit the Suspense fallback. There are ways to have the client only resource so to speak but it won't trigger Suspense on the server.

[atk]

Couldn't you just use a source signal with an () => !isServer guard so the fetcher will not be called on the server?

[lxsmnsyc]

Ideally you'd probably want to set it to true after hydration.

[yume-chan]

const [resource] = createResource(() => !isServer, async () => {
    await new Promise((r) => setTimeout(r, 1000));
    return 42;
  });

This renders nothing (doesn't trigger <Suspense>) in SSR, and also renders nothing (doesn't trigger <Suspense>) on client side first fetch.

I think it's because the first client-side rendering happens during hydration, so the result is ignored. (I kindly expect it to throw a hydration mismatch error, but it also doesn't).

In contrast

  const [resource, { refetch }] = createResource(() => true, async () => {
    if (isServer) {
      return undefined;
    }

    console.log("fetching");
    await new Promise((r) => setTimeout(r, 1000));
    return 42;
  });

It renders nothing in SSR, and starts with state = ready, latest = undefined on client side, so I have to manually handle that, and call refetch in onMount. At least this time it will trigger <Suspense> properly. Currently this is the code I'm using.

But the problem still exists, I want SSR to render the <Suspense> fallback, so user can see it's loading even before scripts are loaded and the client-side starts fetching to trigger the <Suspense>. The user experience is much better especially when scripts are huge, and network is slow.

[atk]

You can simply use https://primitives.solidjs.community/package/lifecycle#ishydrated