Replies: 20 comments 67 replies
-
|
Thanks for summing this up! Remix is advertising that users "own the entry points" and I love this! By better supporting render/hydration entries other then A potential way to achieve this would be to officially expose data used by |
Beta Was this translation helpful? Give feedback.
-
|
Ok, seems like we can not easily render remix |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for drafting this proposal @clgeoio 🙌🏼 FYI, I added a |
Beta Was this translation helpful? Give feedback.
-
|
This isn't just a problem of in-app browsers/extensions or React 18 exclusively. This also relates to any external scripts which inject content to the page. For example — in the current privacy landscape, almost all sites implement some kind of cookie consent script. And I'm currently observing this problem when implementing Quantcast cookie consent on React 17. This script needs to be in head so that the consent api is available to any other resources which depend on it, which means it runs before the hydration. It also inserts the consent dialog to the body as soon as it's loaded. But then when hydration runs the consent dialog gets overridden with client hydration. The best workaround (apart from modifying and maintaining the script itself) is to load it in |
Beta Was this translation helpful? Give feedback.
-
|
I've got a solution for the hydration issues entirely in userland. |
Beta Was this translation helpful? Give feedback.
-
|
For me it works like a charm with https://github.com/Xiphe/remix-island. What do you mean with "abnormal"? |
Beta Was this translation helpful? Give feedback.
-
|
Interesting... I initially tried removing the head child nodes individually, but it wasn't returning the |
Beta Was this translation helpful? Give feedback.
-
|
that's strange. haven't experienced that on my end. will have a look out for that |
Beta Was this translation helpful? Give feedback.
-
|
This approach needs a static css file. Do anyone know how to load the bundled css generated by remix (latest version feature)? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @mh4ck for me it works well with remixes postcss support on my end. A pitfall we've encountered is that we needed to no-opt import the css files also in the client. // entry.client.ts
Promise.all([import("./styles/app.css"), import("./styles/base.css")]).then(
() => {
/* this is required so styles are included in client bundle */
}
);
// client initiation...// entry.server.ts
import appStylesHref from "~/styles/app.css";
import baseStylesHref from "~/styles/base.css";
// ... remix island setup see https://github.com/Xiphe/remix-island#configure
body.write(
`<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href="${baseStylesHref}">
<link rel="stylesheet" href="${appStylesHref}">
${head}
</head><body><div id="root">`,
);
pipe(body);
body.write(`</div></body></html>`);Have not checked how this works with other approaches though. |
Beta Was this translation helpful? Give feedback.
-
|
I took the approach from @kiliman and streamlined it into |
Beta Was this translation helpful? Give feedback.
-
|
Awesome! I've implemented remix-islands in my app, which uses readableStreams (not node), incase you'd like it, here's the changes I had to make to the server file. |
Beta Was this translation helpful? Give feedback.
-
|
I'm still seeing some FOUC when the head is replaced by, I'm not sure if that's an issue on my end though. |
Beta Was this translation helpful? Give feedback.
-
|
I'm getting FOUC too. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, FOUC here too. |
Beta Was this translation helpful? Give feedback.
-
|
Mine was occurring due to a Suspense in the root.tsx, removing this seems to have fixed it |
Beta Was this translation helpful? Give feedback.
-
|
This was discussed in Roadmap #5, around 49'32 @mjackson to respond to this proposal. |
Beta Was this translation helpful? Give feedback.
-
|
This issue is also present on the official Shopify site. Install the Grammarly extension, throttle your CPU (if needed) and you'll see hydration errors in the console. |
Beta Was this translation helpful? Give feedback.
-
|
Does it break the site, or just show an error in the console? |
Beta Was this translation helpful? Give feedback.
-
|
With empty cache it loads the page with all styles, then it flashes white unstyled HTML and then it loads again looking and working correctly. I wouldn't define this as a good experience for the user. |
Beta Was this translation helpful? Give feedback.
-
|
Me neither :) |
Beta Was this translation helpful? Give feedback.
-
|
Checkout @Xiphe This should fix the hydration errors. |
Beta Was this translation helpful? Give feedback.
-
|
Isn't it just the switch to client side rendering? |
Beta Was this translation helpful? Give feedback.
-
|
https://twitter.com/joshcstory/status/1622748680305639429
Looks like the React Team at Vercel are working on this. |
Beta Was this translation helpful? Give feedback.
-
|
Looks like facebook/react#26106 could be the "hoistable" PR to monitor. |
Beta Was this translation helpful? Give feedback.
-
|
Can you folks post what different browser extensions are doing to the DOM that cause hydration errors? Like the "before DOM" and "after DOM" of the browser extension so we can get some good test cases to the React team? |
Beta Was this translation helpful? Give feedback.
-
|
Here's a simple browser extension that causes hydration errors I use it with some voice accessibility software which needs the URL to detect what "actions" I can do on the page https://chrome.google.com/webstore/detail/url-in-title/ignpacbgnbnkaiooknalneoeladjnfgb All it's doing is adding the URL to the title - from the server. After extension runs, but before remix hydrates |
Beta Was this translation helpful? Give feedback.
-
|
It's not only Browser extension, it's also scripts like AdSense, they by default adding some iframes and divs to the body. To test: Just load an external script to the area which adding an element to the body. Also tracking pixels etc. will make problems. |
Beta Was this translation helpful? Give feedback.
-
|
I'm getting it when trying to run the playwright codegen: |
Beta Was this translation helpful? Give feedback.
-
|
ah, just tried on |
Beta Was this translation helpful? Give feedback.
-
|
Here's an examples of before and after that I've rustled together with some extensions that I know are troublesome. For the "Before DOM" I've disabled Javascript and set the throttling of my browser to be very slow.
I've tested Checkmate Savings - Manifest 3, Grammarly - Manifest 2 and LastPass - Manifest 2 An example of a very basic Remix page with Checkmate active. After DOM: |
Beta Was this translation helpful? Give feedback.
-
|
I didn't want to post the HTML of the others because the post would get rather large - but happy to get some more examples if needed. |
Beta Was this translation helpful? Give feedback.
-
|
You mind just trimming it down to just the differences in |
Beta Was this translation helpful? Give feedback.
-
|
Sure, I've done a little trim. Interestingly, the added |
Beta Was this translation helpful? Give feedback.
-
|
Grammarly: |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
Just to add to the use case of browser extensions, we're maintaining a micro frontend architecture where we keep a separate system for e.g. the header, the footer, but also for some shared related things like e.g. shared css. We use a central NGINX and "virtual includes" to stitch the services together, so we have to render a tag like this in |
Beta Was this translation helpful? Give feedback.
-
|
It's pretty difficult to predict changes in head since they can be created from any part of the system (3rd parties injecting things like cookie consent/legal, users browser extensions, more and more 3rd parties xD). The race condition between hydration and head changes is tricky. Deferring 3rd parties to after hydration can be a solution (and probably the best one for some cases), but does not solve the browser extensions issue. At the same time deferring required 3rd parties will behave like waterfall. Exporting I believe that render I agree that this is a react issue but it impacts a lot any system using remix. |
Beta Was this translation helpful? Give feedback.
-
Hey @fernandojbf. Can you please share a minimal working example? |
Beta Was this translation helpful? Give feedback.
-
|
I will make it tonight :) |
Beta Was this translation helpful? Give feedback.
-
|
Hey @sudomf I've made a quick POC with my approach. repo: https://github.com/fernandojbf/remix-react-hydration-workaround For sure the code can be improved a lot. but I think it represent well the approach This was a great opportunity to check the source code of remix. Thank you all remixers involved in this amazing project :) |
Beta Was this translation helpful? Give feedback.
-
|
hey @fernandojbf - do you think it's worth trying to create a package from your changes, if you think it's a more robust solution? I'm not sure what timelines the Vercel/React team are running on, but considering the issue might be more that just |
Beta Was this translation helpful? Give feedback.
-
|
I can put something together if there is the need for it. Give me a couple of weeks too see if i get time to do it. As soon i have info i will bring here. |
Beta Was this translation helpful? Give feedback.
-
|
Looks like its partially fixed in React 18.3.0-next-fccf3a9fb-20230213 (at least for styled-components) |
Beta Was this translation helpful? Give feedback.
-
|
I will run some tests with my example too. |
Beta Was this translation helpful? Give feedback.
-
|
Just tested in my local env using https://github.com/fernandojbf/remix-react-hydration-workaround. I continue to see problems when the content of the document is different. Probably react is targeting things in head to be hosted, but my example is adding content at the end of the body (trying to mimic a 3rd party like cookie consent) and the hydration problem continue to happen. In theory this is the normal behaviour since on mismatch, react is rendering the tree from the begining removing any current content already present. Probably the solution would be hydrating the target node instead of document no matter what. |
Beta Was this translation helpful? Give feedback.
-
|
@fernandojbf I think the work on changing the hydration behavior has not been completed yet and I really hope that we will get a full-fledged solution in react 18.3.0 |
Beta Was this translation helpful? Give feedback.
-
|
For anyone struggling to get this working with MUI/Chakra or other Emotion-based component frameworks, you need to pull the styles out of the entire rendered app, then inject it separately from the rest of the header. The only thing I haven't figured out is how to remove the server rendered header on the client side (i.e. this step). The interaction between attempting to remove the server-rendered header and the useEffect code in Head() (which also is trying to flush and inject style tags into the header) is giving me an error. I just live with the duplicated server-rendered header for now without any real issues. Resources I followed to get my Chakra setup:
UPDATE: see this comment for a solution that works with React 18 renderToPipeableStream() // entry.server.tsx
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
): Response {
const cache = createEmotionCache();
const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache);
const html = renderToString(
<CacheProvider value={cache}>
<RemixServer context={remixContext} url={request.url} />
</CacheProvider>
);
const emotionChunks = extractCriticalToChunks(html);
const emotionCss = constructStyleTagsFromChunks(emotionChunks);
// swap out default component with <Head>
const defaultRoot = remixContext.routeModules.root;
remixContext.routeModules.root = {
...defaultRoot,
default: Head,
};
const head = renderToString(<RemixServer context={remixContext} url={request.url} />);
// restore the default root component
remixContext.routeModules.root = defaultRoot;
const body = renderToString(
<CacheProvider value={cache}>
<RemixServer context={remixContext} url={request.url} />
</CacheProvider>
);
responseHeaders.set("Content-Type", "text/html");
return new Response(
`<!DOCTYPE html><html lang="en"><head><!--start head-->${head}<!--end head-->${emotionCss}</head><body><div id="root">${body}</div></body></html>`,
{
status: responseStatusCode,
headers: responseHeaders,
}
);
}// entry.client.tsx
interface ClientCacheProviderProps {
children: React.ReactNode;
}
function ClientCacheProvider({ children }: ClientCacheProviderProps): JSX.Element {
const [cache, setCache] = useState(defaultCache);
function reset(): void {
setCache(createEmotionCache());
}
return (
<ClientStyleContext.Provider value={{ reset }}>
<CacheProvider value={cache}>{children}</CacheProvider>
</ClientStyleContext.Provider>
);
}
function hydrate(): void {
startTransition(() => {
hydrateRoot(
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- Part of hack for hydrate error https://github.com/kiliman/remix-hydration-fix
document.getElementById("root")!,
<StrictMode>
<ClientCacheProvider>
<RemixBrowser />
</ClientCacheProvider>
</StrictMode>
);
});
}
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Guard for Safari
if (window.requestIdleCallback) {
window.requestIdleCallback(hydrate);
} else {
// Safari doesn't support requestIdleCallback
// https://caniuse.com/requestidlecallback
window.setTimeout(hydrate, 1);
}// root.tsx
export const Head = withEmotionCache((_props, emotionCache) => {
const clientStyleData = useContext(ClientStyleContext);
// Only executed on client
useEffect(() => {
// re-link sheet container
emotionCache.sheet.container = document.head;
// re-inject tags
const tags = emotionCache.sheet.tags;
emotionCache.sheet.flush();
tags.forEach((tag) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any -- Copied from https://chakra-ui.com/getting-started/remix-guide
(emotionCache.sheet as any)._insertTag(tag);
});
// reset cache to reapply global styles
clientStyleData?.reset();
// eslint-disable-next-line react-hooks/exhaustive-deps -- Copied from https://chakra-ui.com/getting-started/remix-guide#2-provider-setup
}, []);
return (
<>
<Meta />
<Links />
</>
);
});
interface DocumentProps {
children: JSX.Element;
}
function Document({ children }: DocumentProps): JSX.Element {
const location = useLocation();
useEffect(() => {
track("Page View", { path: location.pathname });
}, [location]);
return (
<>
<ClientOnly>{(): ReactPortal => createPortal(<Head />, document.head)}</ClientOnly>
<ChakraProvider>{children}</ChakraProvider>
<ScrollRestoration />
<Scripts />
<LiveReload />
</>
);
}
function Root(): JSX.Element {
return (
<Document>
<Outlet />
</Document>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
cool, thanks for sharing 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Additional modifications to make this work with React 18 streaming below. The entry.client.tsx and root.tsx files remain the same as above. Thanks to: https://github.com/remix-run/examples/tree/main/chakra-ui // entry.server.tsx
const ABORT_DELAY = 5000;
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
): Promise<Response> {
return isbot(request.headers.get("user-agent"))
? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
: handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext);
}
function handleBrowserRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
): Promise<Response> {
const emotionCache = createEmotionCache();
const emotionServer = createEmotionServer(emotionCache);
const html = renderToString(
<EmotionCacheProvider value={emotionCache}>
<RemixServer context={remixContext} url={request.url} />
</EmotionCacheProvider>
);
const emotionChunks = emotionServer.extractCriticalToChunks(html);
const emotionCss = emotionServer.constructStyleTagsFromChunks(emotionChunks);
// swap out default component with <Head>
const defaultRoot = remixContext.routeModules.root;
remixContext.routeModules.root = {
...defaultRoot,
default: Head,
};
const head = renderToString(<RemixServer context={remixContext} url={request.url} />);
// restore the default root component
remixContext.routeModules.root = defaultRoot;
return new Promise<Response>((resolve, reject) => {
let didError = false;
const { pipe, abort } = renderToPipeableStream(
<EmotionCacheProvider value={emotionCache}>
<RemixServer context={remixContext} url={request.url} />
</EmotionCacheProvider>,
{
onShellReady: () => {
const body = new PassThrough();
responseHeaders.set("Content-Type", "text/html");
resolve(
new Response(body, {
headers: responseHeaders,
status: didError ? 500 : responseStatusCode,
})
);
body.write(
`<!DOCTYPE html><html lang="en"><head><!--start head-->${head}<!--end head-->${emotionCss}</head><body><div id="root">`
);
pipe(body);
body.end("</div></body></html>");
},
onShellError: (error: unknown) => {
reject(error);
console.error("onShellError", error);
},
onError: (error: unknown) => {
didError = true;
console.error(error);
},
}
);
setTimeout(abort, ABORT_DELAY);
});
}
function handleBotRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
): Promise<Response> {
const emotionCache = createEmotionCache();
const emotionServer = createEmotionServer(emotionCache);
const html = renderToString(
<EmotionCacheProvider value={emotionCache}>
<RemixServer context={remixContext} url={request.url} />
</EmotionCacheProvider>
);
const emotionChunks = emotionServer.extractCriticalToChunks(html);
const emotionCss = emotionServer.constructStyleTagsFromChunks(emotionChunks);
// swap out default component with <Head>
const defaultRoot = remixContext.routeModules.root;
remixContext.routeModules.root = {
...defaultRoot,
default: Head,
};
const head = renderToString(<RemixServer context={remixContext} url={request.url} />);
// restore the default root component
remixContext.routeModules.root = defaultRoot;
return new Promise<Response>((resolve, reject) => {
let didError = false;
const { pipe, abort } = renderToPipeableStream(
<EmotionCacheProvider value={emotionCache}>
<RemixServer context={remixContext} url={request.url} />
</EmotionCacheProvider>,
{
onAllReady: () => {
const body = new PassThrough();
responseHeaders.set("Content-Type", "text/html");
resolve(
new Response(body, {
headers: responseHeaders,
status: didError ? 500 : responseStatusCode,
})
);
body.write(
`<!DOCTYPE html><html lang="en"><head><!--start head-->${head}<!--end head-->${emotionCss}</head><body><div id="root">`
);
pipe(body);
body.end("</div></body></html>");
},
onShellError: (error: unknown) => {
reject(error);
},
onError: (error: unknown) => {
didError = true;
console.error(error);
},
}
);
setTimeout(abort, ABORT_DELAY);
});
} |
Beta Was this translation helpful? Give feedback.
-
I've found that this prevents the document title from being updated correctly. I believe this is a sufficient way of removing the server side head Just add this directly after the |
Beta Was this translation helpful? Give feedback.
-
|
@Moorst That seems like a more complicated version of document.head.innerHTML = document.head.innerHTML.replace(
/<!--start head-->.+<!--end head-->/,
""
);and it had the same problems when I tried (the timing is not right and leads to FOUC for some reason, even though it should only be happening after we already have hydrated the client side headers) |
Beta Was this translation helpful? Give feedback.
-
|
facebook/react#24430 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
remix-island break twind css-in-js pipeableStream ssr. :( |
Beta Was this translation helpful? Give feedback.
-
@Xiphe Do you have the source of where they mention that?
Unfortunately big applications that require extensively use of 3rd parties will suffer from it since all the content done outside of react will be loss in hydration. |
Beta Was this translation helpful? Give feedback.
-
|
Looking to Dans last comment (facebook/react#24430 (comment)) it is clear that the community is moving to full document render.
Let's hope they will mitigate more use cases sooner :) |
Beta Was this translation helpful? Give feedback.
-
|
https://www.shopify.com/ is an example where the hydration problems is giving some glitchs. I can clearly see animation restarting when some browser extensions make hydration to fail. For Shopify website seems to be a little glitch. But could be worse xD There are so many Business/Companies that require a large set of 3rd Parties that makes it really difficult to understand the possible impacts. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry for the late reply, Yes I think I was referring to facebook/react#24430 |
Beta Was this translation helpful? Give feedback.
-
|
According to @gaearon's message in facebook/react#24430 (comment), we shouldn't hydrate |
Beta Was this translation helpful? Give feedback.
-
|
Perhaps, but until React stops throwing hydration errors due to extensions, etc. it's really the only way to prevent the error and be able to use |
Beta Was this translation helpful? Give feedback.
-
|
can you tell me more about the |
Beta Was this translation helpful? Give feedback.
-
|
On the bright side, with the latest react@next release, we can now use defer with hydration errors |
Beta Was this translation helpful? Give feedback.
-
|
@vincentlortie it may fix the hydration error, but also bring some new problems. |
Beta Was this translation helpful? Give feedback.
-
|
For those who encounter this problem, I advise you to install the canary versions of react and react-dom. Canary version in my case solves all hydration problems |
Beta Was this translation helpful? Give feedback.
-
|
Hey all, I am going to close this discussion for now - it seems that the React team are well aware of the issue and are working toward a suitable solution. |
Beta Was this translation helpful? Give feedback.
-
|
Guys, don't upgrade to canary version. it will hurt the page performance. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
@Xiphe react@canary moves all modulepreload scripts to the head above stylesheet links which can impact performance especially without http2 connections or low bandwidth. There's a workaround for this here so I would still recommend react@canary to fix any hydration errors and just apply the workaround for stylesheet links to fix the perf regression. |
Beta Was this translation helpful? Give feedback.
-
|
@WesleyYue
Do you have any clue what might be causing this?
|
Beta Was this translation helpful? Give feedback.
and others
-
There's been a few issues posted that relate to browser extensions breaking the React 18
hydrateRootbecause Remix hydrates the whole document, rather than a div. This issue is discussed in the Roadmap Planning 3.This has been considered more a React problem than Remix, however, this issue affects more than just desktop browsers with extensions enabled and allowing users to solve this issue will stop the buck from being passed around.
I'm not sure if React will close this issue, but we shall see!
The issue impacts Remix sites that are loaded in a non-standard browser, such as TikTok's in-app browser as it injects custom information on page load. This opens the issue surface up widely as now it's not only desktop users, but mobile users too. Apps with in-app browsers include Facebook, Instagram and Slack.
From iOS 15 and onwards, users can install extensions on iOS Safari, although not as common as desktop extensions at the moment it does open the problem space to more iOS devices that are not using in-app browsers.
Although React falls back to doing a client-side render, packages like styled-components may not recover as easily and can result in obvious styling or behavioural issues. There have also been issues with defer'd promises never resolving.
A workaround that has been posted is to downgrade to React 17, who's
hydratemethod seems to be clear of this issue. Doing so is fine, but it means that developers won't be able to usedeferor any of the new React 18 tools.So, with that in mind my proposal is somewhat similar to the suggestion made in the Roadmap Planning video where Remix could be hydrated in two parts.
Hopefully it's not too fiddly to deal with when considering streaming.
I took a stab at implementing something like this, but it lacks the two
hydrateRoots and as such<Meta>and<Links>don't really do anything on client navigations.Relevant hydration issues:
0, 1, 2, 3, 4, 5
Beta Was this translation helpful? Give feedback.
All reactions