SolidJS•12mo ago

Prpc and Suspense question

const Stats: ParentComponent = () => {
  const allStatsPersonal = allStats({ value: "all" });

  return (
    <Suspense fallback={<div>Loading</div>}>
        <ErrorBoundary fallback={(err) => err}>
        <Show
          when={allStatsPersonal.data}
          fallback={<div>loading</div>}
        >....
            </Show>
    </ErrorBoundary>
      </Suspense>
  );

const Stats: ParentComponent = () => {
  const allStatsPersonal = allStats({ value: "all" });

  return (
    <Suspense fallback={<div>Loading</div>}>
        <ErrorBoundary fallback={(err) => err}>
        <Show
          when={allStatsPersonal.data}
          fallback={<div>loading</div>}
        >....
            </Show>
    </ErrorBoundary>
      </Suspense>
  );

My understanding was that I wouldnt need the Show component at all, when using prpc with suspense. However CSR works but SSR doesnt work unless I have Show component. I also have to remove fallback from Show component, since it causes hydration key issue.

1 Reply

Massukka•12mo ago

I think the issue is that suspense does the whole onmount for components with undefined values but i dont know how to fix this. Like it would need to run onmount again once allstats has values

Gaming

Programming

Prpc and Suspense question