S
SolidJS•2w ago
Amir Hossein Hashemi

What are non-hydratable components?

The createUniqueId documentation mentions that it only works in "hydratable components". What does that mean? Is there a common scenario in which a component is considered non-hydratable?
2 Replies
Amir Hossein Hashemi
Amir Hossein HashemiOP•2w ago
I was able to kind of break createUniqueId with this code: 
import { isServer } from "solid-js/web";
import { createUniqueId } from "solid-js";

function Input() {
    if (isServer) {
        createUniqueId();
    }

    return <input id={createUniqueId()} />;
}

export default function Page() {
    return <Input />;
}
import { isServer } from "solid-js/web";
import { createUniqueId } from "solid-js";

function Input() {
    if (isServer) {
        createUniqueId();
    }

    return <input id={createUniqueId()} />;
}

export default function Page() {
    return <Input />;
}
Based on that do you think it's fair to replace that note about "hydratable components" with something like this:
createUniqueId must be called exactly the same number of times both on the server and client. Calling createUniqueId only on the server (for example, using the isServer constant) may lead to hydration errors.
Because, as far as I can tell, that's the main principle that prevents createUniqueId from working within non-hydratable components.
paul_11097
paul_11097•2w ago
how do you call the Page? Basically there is the <Hydration/> and the <NoHydration/> from solidjs/web. Component where children are inside <NoHydration/> dont get any hydration keys and children inside <Hydration/> get hydration keys for example if you want to do Islands your <Page> would be inside <NoHydration/> and only components that should be able to be Interactive inside <Hydration/>. I think what they want to point out is if you cal createUniqueId on the server during render your page for example 5 times but on client during hydration for example 4 times you get hydration miss matches.

Did you find this page helpful?