[storage] signal is not updated during hydration when doing SSR or SSG

[mb21]

Describe The Problem To Be Solved

Reproduce by creating a new solid-start project from the bare template with SSR and change the line in Counter.tsx to:

const [count, setCount] = makePersisted(createSignal(0));

(Sorry I couldn't find a stackblitz template with solid-start.)

If you increase the counter and then reload the page, the counter isn't rendered and you get in the console:

Counter.tsx:7 Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-2-1-0-0-2-1

---

Similarly, using Astro's client:load directive (which does server-side render or generate the HTML in SSG-mode), on page-load the counter is always 0.

Suggest A Solution

While it's unavoidable that the initial HTML contains 0 (since we cannot know the value of localStorage on the server), ideally storage would update the signal during or after hydration to read out the value from localStorage.

[yume-chan]

It's different from #480.

There are two issues in this:

1. On server, storage-${createUniqueId()} doesn't run, causing "Unable to find DOM nodes for hydration key" error and nothing rendered.

   solid-primitives/packages/storage/src/persisted.ts

   Lines 56 to 62 in 9ac8b6e

   	const storage = options.storage || globalThis.localStorage;
   	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   	if (!storage) {
   	return signal;
   	}
   	const name = options.name || `storage-${createUniqueId()}`;

   Workaround: provide a name to your signal.

2. Looks like Solid skips string/number content update during hydration, it always uses the result of SSR

   https://github.com/ryansolid/dom-expressions/blob/679bf6d4d88517c6d7c57eca7dbcced1cd538fd7/packages/dom-expressions/src/client.js#L400-L401

   If Astro is interacting with Solid's re-hydration system, this may cause the initial value to always be 0.

[yume-chan]

You can create StackBlitz projects with Solid-Start using https://stackblitz.com/fork/github/solidjs/solid-start/tree/main/examples/bare

However Solid-Start 0.3.1 requires Node.js 18, and StackBlitz is still using Node.js 16, so I have this one with Solid-Start downgraded: https://stackblitz.com/edit/solidjs-solid-start-961vf8?file=package.json

[mb21]

Thanks for the quick reply!

True that adding the name makes the error go away in solid start, but it still initializes the server-side-rendered HTML with 0, thus when you press the button it jumps to e.g. 6. So same behaviour as with Astro.

(I forked the StackBlitz but seems the newest storage npm package also requires Node 18: https://stackblitz.com/edit/solidjs-solid-start-fewnfx)