SolidJS•12mo ago

hydration mismatch when wrapping component in a suspense

I am trying to render a loading ui when data is being collected on the server:

function SectionA(props: { expanded: boolean }) {
  const apps = useRouteData<typeof routeData>();
  return (
     <div>
      <Label>Applications</Label>
      <Suspense fallback={<div>Loading apps...</div>}>
        <For each={apps()} fallback={<div>No apps yet</div>}>
          {(app) => (
            <App app={app}/>
          )}
        </For>
      </Suspense>
     </div>
  );
}

function SectionA(props: { expanded: boolean }) {
  const apps = useRouteData<typeof routeData>();
  return (
     <div>
      <Label>Applications</Label>
      <Suspense fallback={<div>Loading apps...</div>}>
        <For each={apps()} fallback={<div>No apps yet</div>}>
          {(app) => (
            <App app={app}/>
          )}
        </For>
      </Suspense>
     </div>
  );
}

For context this is routeData that i defined on the parent route:

export const routeData = ({ params }: RouteDataArgs) => {
  return createServerData$(
    async ([organizationId], event) => {
      await new Promise((resolve) => setTimeout(resolve, 5000));
      // removed for brievity
      return applications;
    },
    { key: () => [params.id] }
  );
};

export const routeData = ({ params }: RouteDataArgs) => {
  return createServerData$(
    async ([organizationId], event) => {
      await new Promise((resolve) => setTimeout(resolve, 5000));
      // removed for brievity
      return applications;
    },
    { key: () => [params.id] }
  );
};

Observation: 1. When i put a delay of 5 seconds, and reload the page, a GET request is sent to the server the page will show that it's loading for 5 seconds 2. Once the 5 seconds is up, a POST request is sent to that page's routeData, then it loads for another 5 seconds. 3. This is the time when the error below appears. The suspense will now also show the loading fallback.

sidebar.tsx:211 Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-2-0-0-1-3-0-3-0-f0

sidebar.tsx:211 Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-2-0-0-1-3-0-3-0-f0

4. Once the 5 seconds is up, then the page now shows the correct data. TLDR, i have two questions: - why is there a total delay of 10 seconds to load the data in when i only put a delay of 5 seconds - why is there a hydration mismatch error

1 Reply

dion•12mo ago

bump Hmmm, i think i might have caused a refetch because i click dismiss the error, however, do you know what might have caused the hydration error? @Toka

Gaming

Programming

hydration mismatch when wrapping component in a suspense