SolidJS•14mo ago

Client-only resource with SSR

Is there a way to make a client-only resource? that is, don't even bother on the server, render the fallback, then start fetching immediately on the client? I can use refetch in an effect but it briefly returns the server value before refetch starts without showing the fallback. Using a source signal does not render the fallback on the server

3 Replies

Alex Lohr•14mo ago

Just wrap the resource in an onMount. Or use the ssrLoadFrom: "initial" option in the resource.

Wurfle•14mo ago

ssrLoadFrom: "initial" doesn't run the fetcher on the client as far as I can tell:

  const [test] = createResource(
    () => {
      console.log('fetcher')
      return 'data'
    },
    { ssrLoadFrom: 'initial', initialValue: undefined },
  )

  createEffect(() => {
    console.log('result: ', test())
  })

  const [test] = createResource(
    () => {
      console.log('fetcher')
      return 'data'
    },
    { ssrLoadFrom: 'initial', initialValue: undefined },
  )

  createEffect(() => {
    console.log('result: ', test())
  })

Also I don't think there's a way to trigger Suspense from a resource inside onMount

Alex Lohr•14mo ago

You need to evaluate the resource for the fetcher to run. Also, Suspense will work for all resources inside the same component.

Gaming

Programming

Client-only resource with SSR