S
SolidJS9mo ago
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] }
);
};
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
dion9mo 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