SolidJS•2y ago

Check if the code runs in CSR or CSR + hydration

Is there a way to check if the code runs during hydration or just normal CSR, the same way you are able to check if you are on the server or clinet using isServer or export conditions? This is mostly about authoring libraries, where you want to run different logic depending on if the env is SSR / CRS / CRS + hydration. it's related to the issue here: https://github.com/solidjs-community/solid-primitives/issues/310

29 Replies

lxsmnsyc•2y ago

iirc internallly it is sharedConfig.context for just CSR, yes you only check if it is isServer to check if the component is currently hydrating, an internal check for sharedConfig.context but I might be wrong

thetarnavOP•2y ago

thx will try that

thetarnavOP•2y ago

btw your usePrefersDark in solid-use has the same issue as the one in solid-primitives: https://stackblitz.com/edit/github-tzjxcu-qtg74p?file=src/components/Test.tsx

StackBlitz

solid-use astro prefers dark - StackBlitz

Run official live example code for Astro Framework Solid, created by Withastro on StackBlitz

Razboy20•2y ago

(Sorry, realized that I misunderstood while testing)

thetarnavOP•2y ago

what was wrong? I got interested 😅

Razboy20•2y ago

With the solution?

thetarnavOP•2y ago

yeah, with the resouirce

Razboy20•2y ago

Well it still had the same problem with hydration ultimately I had

function usePrefersDark() {
  const [preferred, setPreferred] = createSignal<boolean | undefined>(false);
  createResource(
    () => (isServer ? false : window.matchMedia("(prefers-color-scheme: dark)").matches),
    {
      initialValue: false,
      storage: () => [preferred, setPreferred],
      onHydrated() {
        setPreferred(window.matchMedia("(prefers-color-scheme: dark)").matches);
      },
    }
  );
  return preferred;
}

function usePrefersDark() {
  const [preferred, setPreferred] = createSignal<boolean | undefined>(false);
  createResource(
    () => (isServer ? false : window.matchMedia("(prefers-color-scheme: dark)").matches),
    {
      initialValue: false,
      storage: () => [preferred, setPreferred],
      onHydrated() {
        setPreferred(window.matchMedia("(prefers-color-scheme: dark)").matches);
      },
    }
  );
  return preferred;
}

But you end up with the same result anyway

thetarnavOP•2y ago

does onHuydrated override the resource value? ah you changed it to a signal

Razboy20•2y ago

Weird; adding ssrLoadFrom: "initial" seems to fix that hydration issue

Razboy20•2y ago

https://stackblitz.com/edit/github-tzjxcu-xemsb3?file=src%2Fcomponents%2FTest.tsx

Razboy20

StackBlitz

solid-use astro prefers dark (forked) - StackBlitz

Run official live example code for Astro Framework Solid, created by Withastro on StackBlitz

Razboy20•2y ago

where you have

function usePrefersDark() {
  const [preferred, setPreferred] = createSignal<boolean | undefined>(false);
  createResource(
    () => window.matchMedia('(prefers-color-scheme: dark)').matches,
    {
      initialValue: false,
      ssrLoadFrom: 'initial',
      storage: () => [preferred, setPreferred],
      onHydrated() {
        setPreferred(window.matchMedia('(prefers-color-scheme: dark)').matches);
      },
    }
  );
  return preferred;
}

function usePrefersDark() {
  const [preferred, setPreferred] = createSignal<boolean | undefined>(false);
  createResource(
    () => window.matchMedia('(prefers-color-scheme: dark)').matches,
    {
      initialValue: false,
      ssrLoadFrom: 'initial',
      storage: () => [preferred, setPreferred],
      onHydrated() {
        setPreferred(window.matchMedia('(prefers-color-scheme: dark)').matches);
      },
    }
  );
  return preferred;
}

thetarnavOP•2y ago

same stuff I guess

const [preferred, { refetch }] = createResource(
  () => window.matchMedia('(prefers-color-scheme: dark)').matches,
  {
    initialValue: false,
    ssrLoadFrom: 'initial',
    onHydrated() {
      refetch();
    },
  }
);

const [preferred, { refetch }] = createResource(
  () => window.matchMedia('(prefers-color-scheme: dark)').matches,
  {
    initialValue: false,
    ssrLoadFrom: 'initial',
    onHydrated() {
      refetch();
    },
  }
);

Razboy20•2y ago

ah true

thetarnavOP•2y ago

it's funny that ssrLoadFrom: 'initial' changes anything when I thought it only prevented to fetch on the server

Razboy20•2y ago

yeah, I wonder why it triggers tracking I'm guessing it's because without ssrLoadFrom, the initialvalue isn't actually being used and possibly initialvalue is not equality checked?

thetarnavOP•2y ago

it maybe a bug, the initial value shouldn't be used on the client anyway - it would come from serialized blob, right?

Razboy20•2y ago

if you have ssrLoadFrom, then initialValue is just serialized/hydrated on the client if you don't refetch

thetarnavOP•2y ago

only if you have that enabled? I thought that without it it would use the value fetched on the server. I guess thats depending on if it's async / sync rendering with Astro it's only sync, so the fetch won't be used it won't even happen on the server

Razboy20•2y ago

ah also interesting

You can use the new ssrLoadFrom option for this. Instead of using the default "server" value, you can pass "initial" and the resource will use initialValue as if it were the result of the first fetch for both SSR and hydration.

thetarnavOP•2y ago

also here is a solution that doesn't use resource https://stackblitz.com/edit/github-tzjxcu-xofarw?file=src%2Fcomponents%2FTest.tsx

Damian Tarnawski

StackBlitz

solid-primitives hydration prefers dark - StackBlitz

Run official live example code for Astro Framework Solid, created by Withastro on StackBlitz

thetarnavOP•2y ago

resource is fun but it does way more then I need

Razboy20•2y ago

I agree In the opposite line of thought, without using resources, how would you generate a random number serverside, then keep it on the client without making a new one? e.g. with resources:

const [randomsResource] = createResource(() => [""], {
    initialValue: [
      Math.random()
    ],
    ssrLoadFrom: "initial",
  });

const [randomsResource] = createResource(() => [""], {
    initialValue: [
      Math.random()
    ],
    ssrLoadFrom: "initial",
  });

lxsmnsyc•2y ago

it's a tricky one, since this one tackles a bit of resumability. I'm writing a primitive right now to make this happen that is, a solid-use primitve

Razboy20•2y ago

use-ful! xD

lxsmnsyc•2y ago

Here's the previous idea: https://discord.com/channels/722131463138705510/780502110772658196/1070721305634152488

Razboy20•2y ago

Also, just wanted to let you know that I submitted a pr to solid-headless for transitions

lxsmnsyc•2y ago

yes I just saw, I'll take a look later

Razboy20•2y ago

👍 Interesting, looking forward to seeing the result

Gaming

Programming

Check if the code runs in CSR or CSR + hydration