why spa mode still use hydration？

[SteveSuv]

spa mode doesn't has server, why still use hydrateRoot by default but not createRoot, I don't understand.

[alexanderson1993]

SPA mode still needs a way to generate the initial index.html that is first loaded when visitors come to your app. hydrateRoot is what is rendered into that index.html

[SteveSuv]

Thanks for your reply. But I tried toggle hydrateRoot to createRoot in entry.client.tsx, it works fine too. So what's the difference between two way?

[alexanderson1993]

Probably not a huge difference either way. With createRoot, React will throw out all of the initial HTML on the page and replace it with the React components. With hydrateRoot, React will keep the existing elements and associate them with their corresponding React elements. Since Remix still generates initial HTML based on your root route, I think hydrateRoot leads to faster app initialization and lower memory usage at first, but you're probably fine using createRoot.

What difference does it make to you? Why are you investigating the differences between createRoot and hydrateRoot?

[SteveSuv]

Because of HydrateFallback component.
when I want to use client vars like window,location,document, it shows undefined.
and I can't render client component in HydrateFallback, like react-spinners. remix will throw error.
what I don't understand is why I can't use client things in a pure client spa mode?
so I doubt the reason is hydrateRoot , but if I change to createRoot, it still throw error.🥹

export function HydrateFallback() {
  console.log(window);
  return <div>{window.location.href} is loading...</div>;
}

ReferenceError: window is not defined

---

import HashLoader from "react-spinners/HashLoader";

export function HydrateFallback() {
  return <HashLoader/>
}

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at root.tsx:53.
at HydrateFallback

[alexanderson1993]

It's not strictly a pure client SPA. The initial index.html is compiled by Remix in a Node environment, where window doesn't exist. You need to wrap your window use in a little check:

export function HydrateFallback() {
  if (typeof window !== "undefined") {
    console.log(window)
  }
  // ...
}

I don't know why <HashLoader> wasn't working properly for you.

[SteveSuv]

Thanks,I understand