utils to render remix into a dom-node instead of the whole document
npm install remix-islandšØ 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, https://github.com/remix-run/remix/issues/5144, https://github.com/remix-run/remix/issues/4822, https://github.com/remix-run/remix/discussions/5244, https://github.com/facebook/react/issues/24430
---
utils to render remix into a dom-node (like ) instead of the whole document
This approach was pioneered by @kiliman in kiliman/remix-hydration-fix ššš
``bash`
npm i remix-island
#### 1. Stop rendering the whole html document from within remix
`diff
--- 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(() => (
+ <>
+
+
+ >
+));
+
export default function App() {
return (
-
-
#### 2. Manually render the
and create the document`diff
--- 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(
,
{
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(
+
${head},
+ );
pipe(body);
+ body.write();
},
onShellError(error: unknown) {
reject(error);
@@ -82,6 +88,7 @@ function handleBrowserRequest(
,
{
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(
+
${head},
+ );
pipe(body);
+ body.write();
},
onShellError(err: unknown) {
reject(err);
`#### 3. hydrate
`diff
--- 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')!,
,
`#### 4. Value š°
pitfalls/notes
#### TL;DR:
Everything that does not need to be managed by remix should be placed before
${head} in entry.server.tsx.#### Order of elements in head might change
The remix-managed
which includes all the stuff from MetaFunction and LinksFunction will move to the end of 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 to minimize impact of this.#### Scripts might run twice
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
to prevent this.#### Flash of unstyled content
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
.#### Usage with Stitches
@louisremi found out that for stitches it's required to render the
` after the rest of the document (#11)