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

SolidJS•3y ago•

2 replies

dion

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] }
  );
};

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

hydration mismatch when wrapping component in a suspense

Similar Threads

hydration mismatch when wrapping component in a suspense

Similar Threads

Similar Threads

Similar Threads