SSR - animated `Unrecoverable Hydration Mismatch` error

[nirtamir2]

Hi! Thank you for creating this lib! I use this library with solid-start. I created a page in the routes folder with

export default function Page() {
    return  <animated.div>
        test
    </animated.div>
}

But if I render it in SSR - I get warnings:

Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-1-0-0-0-0-0
Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-1-0-0-0-1
Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-1-0-0-1-0-0

And then the error

ErrorBoundary.tsx:27 Error: Unrecoverable Hydration Mismatch. No template for key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-1-0-0-0-1
    at getNextElement (dev.js:250:26)
    at Object.fn (dev.js:590:43)
    at runComputation (dev.js:705:22)
    at updateComputation (dev.js:688:3)
    at Object.readSignal (dev.js:621:99)
    at resolveChildren (dev.js:972:82)
    at createMemo.name [as fn] (dev.js:587:33)
    at runComputation (dev.js:705:22)
    at updateComputation (dev.js:688:3)
    at createMemo (dev.js:244:10)

so I could not use it in SSR

You can reproduce it in any solid-start example with this page content. For example: https://github.com/solidjs/solid-start/tree/main/examples/bare And replace https://github.com/solidjs/solid-start/blob/main/examples/bare/src/routes/index.tsx content with

export default function Page() {
    return  <animated.div>
        test
    </animated.div>
}

[Aslemammad]

Hey, @nirtamir2, For now I cannot work on these issues since I got so much on my plate, but if you're interested, feel free to work on it.

[nirtamir2]

Thanks for your quick response! I used a different implementation without solid-spring because I just want it to work. For those who get the same issue - maybe https://vite-plugin-ssr.com/hydration-mismatch will help for an escape hatch.

export { onBeforeRender }

async function onBeforeRender() {
    const stuff = <animated.div>test</animated.div>

    return {
        pageContext: {
            stuff
        }
    }
}

I got this tip from https://discord.com/channels/722131463138705510/910635844119982080