🚨 this package is a workaround to allow usage of remix with react@(18.0 - 18.2) which comes with a lot of hydration problems. I'll probably not maintain this for long after react@18.3 hopefully fixes this.
ref https://github.com/remix-run/remix/issues/5463, remix-run/remix#5144, remix-run/remix#4822, remix-run/remix#5244, facebook/react#24430
utils to render remix into a dom-node (like <div id="root"></div>) instead of the whole document
This approach was pioneered by @kiliman in kiliman/remix-hydration-fix 🙏👍🎉
npm i remix-island--- a/app/root.tsx
+++ b/app/root.tsx
@@ -7,6 +7,7 @@ import {
Scripts,
ScrollRestoration,
} from '@remix-run/react';
+import { createHead } from 'remix-island';
export const meta: MetaFunction = () => ({
charset: 'utf-8',
@@ -14,19 +15,21 @@ export const meta: MetaFunction = () => ({
viewport: 'width=device-width,initial-scale=1',
});
+export const Head = createHead(() => (
+ <>
+ <Meta />
+ <Links />
+ </>
+));
+
export default function App() {
return (
- <html lang="en">
- <head>
- <Meta />
- <Links />
- </head>
- <body>
- <Outlet />
- <ScrollRestoration />
- <Scripts />
- <LiveReload />
- </body>
- </html>
+ <>
+ <Head />
+ <Outlet />
+ <ScrollRestoration />
+ <Scripts />
+ <LiveReload />
+ </>
);
}--- a/app/entry.server.tsx
+++ b/app/entry.server.tsx
@@ -4,6 +4,8 @@ import { Response } from '@remix-run/node';
import { RemixServer } from '@remix-run/react';
import isbot from 'isbot';
import { renderToPipeableStream } from 'react-dom/server';
+import { renderHeadToString } from 'remix-island';
+import { Head } from './root';
const ABORT_DELAY = 5000;
@@ -41,6 +43,7 @@ function handleBotRequest(
<RemixServer context={remixContext} url={request.url} />,
{
onAllReady() {
+ const head = renderHeadToString({ request, remixContext, Head });
const body = new PassThrough();
responseHeaders.set('Content-Type', 'text/html');
@@ -51,8 +54,11 @@ function handleBotRequest(
status: didError ? 500 : responseStatusCode,
}),
);
+ body.write(
+ `<!DOCTYPE html><html><head>${head}</head><body><div id="root">`,
+ );
pipe(body);
+ body.write(`</div></body></html>`);
},
onShellError(error: unknown) {
reject(error);
@@ -82,6 +88,7 @@ function handleBrowserRequest(
<RemixServer context={remixContext} url={request.url} />,
{
onShellReady() {
+ const head = renderHeadToString({ request, remixContext, Head });
const body = new PassThrough();
responseHeaders.set('Content-Type', 'text/html');
@@ -93,7 +100,11 @@ function handleBrowserRequest(
}),
);
+ body.write(
+ `<!DOCTYPE html><html><head>${head}</head><body><div id="root">`,
+ );
pipe(body);
+ body.write(`</div></body></html>`);
},
onShellError(err: unknown) {
reject(err);--- a/app/entry.client.tsx
+++ b/app/entry.client.tsx
@@ -5,7 +5,7 @@ import { hydrateRoot } from 'react-dom/client';
function hydrate() {
startTransition(() => {
hydrateRoot(
- document,
+ document.getElementById('root')!,
<StrictMode>
<RemixBrowser />
</StrictMode>,Everything that does not need to be managed by remix should be placed before ${head} in entry.server.tsx.
The remix-managed <Head /> which includes all the stuff from MetaFunction and LinksFunction will move to the end of <head /> once the client is hydrated. If you combine this with other libraries that inject elements into the head (like styled-components) this might lead to unexpected behaviour.
Move all global styles out of remix into the static <head /> to minimize impact of this.
Due to how this "hack" is working, if you have other bootstrap scripts (for example raygun). These might run twice. Move them out of remix into the static <head /> to prevent this.
Some users of this notice a flash of unstyled content when remix manages some of the CSS. We found that most of the time this only happens in development with browser cache disabled. When you observe something like this in production with cache enabled try moving all global styles out of remix into the static <head />.
@louisremi found out that for stitches it's required to render the <Head /> after the rest of the document (#11)
