solid icon indicating copy to clipboard operation
solid copied to clipboard

[SSR/Astro] DOM Not Updated from State by Client Updates onMount

Open NexRX opened this issue 1 year ago • 0 comments

Describe the bug

When SSRing with state and that state is updated on the client immediately/onMount, the new value is not reflected in the DOM.

Your Example Website or App

https://stackblitz.com/~/github.com/NexRX/astro-solid-nanostore

Steps to Reproduce the Bug or Issue

Using my example which demos a simple theme toggle defaulting to 'dark' mode...

  1. Click the toggle to change the state to 'light' mode.
  2. Reload the page
  3. Observe page reflects 'light' mode (because store subscriber is changing this) but controls show the 'dark' mode. a. Press the button to console log state which shows store actually holds 'light'

Expected behavior

When the client takes over after SSR the DOM reflect the updated state from onMount

Screenshots or Videos

Issue Demo Gif

Platform

  • OS: Windows 11
  • Browser: Chrome
  • Version: 124

Additional context

  • You can afterward toggle it a couple times which fixes the issues only after.
  • When rendering with astro using client:only the problem goes away (but not ideal)
  • The nanostore-persistant uses nanostore's version of onMount but I did fork and try using solid-js's onMount to the same effect

NexRX avatar May 05 '24 23:05 NexRX