SolidJS•4mo ago

Seemingly random hydration mismatches

Hello! I'm super new to solid js and web frameworks in general This is the code I use to check if a given server is online

        <p class="col-start-2 row-start-1 text-right mr-3">Status: {
          props.online ?
            (
              <div class="inline-flex gap-1">
                <span class="text-server-online">●</span>
                <span>Online</span>
              </div>
            ) :
            (
              <div class="inline-flex gap-1">
                <span class="text-server-offline">●</span>
                <span>Offline</span>
              </div>
            )
        }</p>

        <p class="col-start-2 row-start-1 text-right mr-3">Status: {
          props.online ?
            (
              <div class="inline-flex gap-1">
                <span class="text-server-online">●</span>
                <span>Online</span>
              </div>
            ) :
            (
              <div class="inline-flex gap-1">
                <span class="text-server-offline">●</span>
                <span>Offline</span>
              </div>
            )
        }</p>

And when I reload it, and only when I reload my webpage does it return a hydration mismatch. I only found out after making a commit. This is the code that fixed it:

        {
          props.online ?
            (
              <p class="col-start-2 row-start-1">Status:
                <span class="text-server-online mx-1">●</span>
                <span>Online</span>
              </p>
            ) :
            (
              <p class="col-start-2 row-start-1">Status:
                <span class="text-server-offline mx-1">●</span>
                <span>Offline</span>
              </p>
            )
        }

        {
          props.online ?
            (
              <p class="col-start-2 row-start-1">Status:
                <span class="text-server-online mx-1">●</span>
                <span>Online</span>
              </p>
            ) :
            (
              <p class="col-start-2 row-start-1">Status:
                <span class="text-server-offline mx-1">●</span>
                <span>Offline</span>
              </p>
            )
        }

Then I tried copying the div from the old code into the p, to simulate that the that server is online. I have a few questions: - Why error on reload and not when it hot reloads/reloads by itself? - Why arent divs allowed inside ps? Again I only know enough html to make a couple side projects. I've never actually done anything like this before

GitHub

chore: text alignment n stuff · Kiwifuit/McManager@07109ab

5 Replies

Madaxen86•4mo ago

This might happen when on the server props.online evaluates to a different value than on the client. Regarding no div in p: This is a web standard:https://www.w3.org/TR/html401/struct/text.html#h-9.3.1

Andreas Roth•4mo ago

The div/p thing is what causes these errors. When getting the plain html, the browser assumes that div inside of a p is an error, closes the p and opens a new div. Once solid hydrates it sees this, complains, and tries to fix it. So when you look in devtools it will be correct. If you disable JS or only look at the returned static html, you will see another structure.

Madaxen86•4mo ago

Nice. I didn’t know that.

MiseryOP•4mo ago

how can this be? props.online is a bool:

  // ...
  online: boolean,
  // ...

  // ...
  online: boolean,
  // ...

and im using online properly:

        <ServerListItem
          id="server-2"
          online={true}
          display_name="Server 02 Name"
          description=""
          players={{ total: 20, active: 15 }}
          modpack="test2"
          software="Forge 1.2.3 for Minecraft 1.20.1" />

        <ServerListItem
          id="server-2"
          online={true}
          display_name="Server 02 Name"
          description=""
          players={{ total: 20, active: 15 }}
          modpack="test2"
          software="Forge 1.2.3 for Minecraft 1.20.1" />

Madaxen86•4mo ago

Well, that code wasn’t available. It could happen when you fetch data from a headless cms, and you forget to pass cookies/the token on the server but they are include on the client.

Gaming

Programming

Seemingly random hydration mismatches