Replies: 1 comment 2 replies
-
|
@dtinth Pretty sure you can take your entry.client.tsx and do a renderRoot instead of hydrateRoot. |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
Here’s how I did it: // root.tsx
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import "./index.css";
export function Layout({ children }: { children: React.ReactNode }) {
if (typeof window === "undefined") {
return (
<html lang="en" data-bs-theme="dark" className="dtinth">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<div id="app">{children}</div>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
} else {
return <>{children}</>;
}
}So far it works, but not sure if there are better ways. |
Beta Was this translation helpful? Give feedback.
-
|
It seems not the correct way to do that. In this case, the |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I am using MUI in a Remix SPA app I’m developing.
I found that when our user has some Chrome extensions installed, hydration would fail, leading to errors like this and styles not working.
When hydration is working properly, it would look like this:
This “gotcha” is documented in Remix’s docs:
However, it isn’t practical for us to ask our users to always use our app in incognito mode. Each user may have different extensions installed, and that’s out of our control.
In order to avoid SSR hydration-related headache, is it possible to tell Remix to not hydrate the HTML, and instead, do something like what Create React App does, i.e., mounting into
#rootwithout hydration?Beta Was this translation helpful? Give feedback.
All reactions