From 2f4891673b39771086da44fffe34946d3475c661 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Wed, 11 Jan 2023 14:47:46 -0800
Subject: [PATCH 1/7] feat: lazy data via `defer()` and `<Await>`

---
 integration/defer-loader-test.ts              |   93 ++
 integration/defer-test.ts                     | 1272 +++++++++++++++++
 .../node-template/app/entry.server.tsx        |   12 +-
 packages/remix-cloudflare/index.ts            |    1 +
 packages/remix-deno/index.ts                  |    1 +
 packages/remix-node/index.ts                  |    1 +
 packages/remix-react/browser.tsx              |    2 +
 packages/remix-react/components.tsx           |  237 ++-
 packages/remix-react/data.ts                  |  193 +++
 packages/remix-react/entry.ts                 |    1 +
 packages/remix-react/index.tsx                |    4 +
 packages/remix-react/markup.ts                |   20 +
 packages/remix-react/package.json             |    4 +-
 packages/remix-react/routes.tsx               |   12 +-
 packages/remix-react/server.tsx               |    8 +-
 packages/remix-server-runtime/data.ts         |   18 +-
 packages/remix-server-runtime/index.ts        |    2 +-
 packages/remix-server-runtime/package.json    |    2 +-
 packages/remix-server-runtime/responses.ts    |  142 +-
 packages/remix-server-runtime/server.ts       |   24 +-
 .../remix-server-runtime/serverHandoff.ts     |    1 +
 packages/remix-testing/package.json           |    4 +-
 yarn.lock                                     |   30 +-
 23 files changed, 2038 insertions(+), 46 deletions(-)
 create mode 100644 integration/defer-loader-test.ts
 create mode 100644 integration/defer-test.ts

diff --git a/integration/defer-loader-test.ts b/integration/defer-loader-test.ts
new file mode 100644
index 00000000000..a8a292f9f34
--- /dev/null
+++ b/integration/defer-loader-test.ts
@@ -0,0 +1,93 @@
+import { test, expect } from "@playwright/test";
+
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
+import type { Fixture, AppFixture } from "./helpers/create-fixture";
+import { PlaywrightFixture } from "./helpers/playwright-fixture";
+
+let fixture: Fixture;
+let appFixture: AppFixture;
+
+test.beforeAll(async () => {
+  fixture = await createFixture({
+    files: {
+      "app/routes/index.jsx": js`
+        import { useLoaderData, Link } from "@remix-run/react";
+        export default function Index() {
+          return (
+            <div>
+              <Link to="/redirect">Redirect</Link>
+              <Link to="/direct-promise-access">Direct Promise Access</Link>
+            </div>
+          )
+        }
+      `,
+
+      "app/routes/redirect.jsx": js`
+        import { defer } from "@remix-run/node";
+        export function loader() {
+          return defer({food: "pizza"}, { status: 301, headers: { Location: "/?redirected" } });
+        }
+        export default function Redirect() {return null;}
+      `,
+
+      "app/routes/direct-promise-access.jsx": js`
+        import * as React from "react";
+        import { defer } from "@remix-run/node";
+        import { useLoaderData, Link, Await } from "@remix-run/react";
+        export function loader() {
+          return defer({
+            bar: new Promise(async (resolve, reject) => {
+              resolve("hamburger");
+            }),
+          });
+        }
+        let count = 0;
+        export default function Index() {
+          let {bar} = useLoaderData();
+          React.useEffect(() => {
+            let aborted = false;
+            bar.then((data) => {
+              if (aborted) return;
+              document.getElementById("content").innerHTML = data + " " + (++count);
+              document.getElementById("content").setAttribute("data-done", "");
+            });
+            return () => {
+              aborted = true;
+            };
+          }, [bar]);
+          return (
+            <div id="content">
+              Waiting for client hydration....
+            </div>
+          )
+        }
+      `,
+    },
+  });
+
+  appFixture = await createAppFixture(fixture);
+});
+
+test.afterAll(async () => appFixture.close());
+
+test("deferred response can redirect on document request", async ({ page }) => {
+  let app = new PlaywrightFixture(appFixture, page);
+  await app.goto("/redirect");
+  await page.waitForURL(/\?redirected/);
+});
+
+test("deferred response can redirect on transition", async ({ page }) => {
+  let app = new PlaywrightFixture(appFixture, page);
+  await app.goto("/");
+  await app.clickLink("/redirect");
+  await page.waitForURL(/\?redirected/);
+});
+
+test("can directly access result from deferred promise on document request", async ({
+  page,
+}) => {
+  let app = new PlaywrightFixture(appFixture, page);
+  await app.goto("/direct-promise-access");
+  let element = await page.waitForSelector("[data-done]");
+  expect(await element.innerText()).toMatch("hamburger 1");
+});
diff --git a/integration/defer-test.ts b/integration/defer-test.ts
new file mode 100644
index 00000000000..bbb85be363d
--- /dev/null
+++ b/integration/defer-test.ts
@@ -0,0 +1,1272 @@
+import { test, expect } from "@playwright/test";
+import type { ConsoleMessage, Page } from "@playwright/test";
+
+import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import type { Fixture, AppFixture } from "./helpers/create-fixture";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
+
+const ROOT_ID = "ROOT_ID";
+const INDEX_ID = "INDEX_ID";
+const DEFERRED_ID = "DEFERRED_ID";
+const RESOLVED_DEFERRED_ID = "RESOLVED_DEFERRED_ID";
+const FALLBACK_ID = "FALLBACK_ID";
+const ERROR_ID = "ERROR_ID";
+const ERROR_BOUNDARY_ID = "ERROR_BOUNDARY_ID";
+const MANUAL_RESOLVED_ID = "MANUAL_RESOLVED_ID";
+const MANUAL_FALLBACK_ID = "MANUAL_FALLBACK_ID";
+const MANUAL_ERROR_ID = "MANUAL_ERROR_ID";
+
+declare global {
+  // eslint-disable-next-line prefer-let/prefer-let
+  var __deferredManualResolveCache: {
+    nextId: number;
+    deferreds: Record<
+      string,
+      { resolve: (value: any) => void; reject: (error: Error) => void }
+    >;
+  };
+}
+
+test.describe("non-aborted", () => {
+  let fixture: Fixture;
+  let appFixture: AppFixture;
+
+  test.beforeAll(async () => {
+    fixture = await createFixture({
+      ////////////////////////////////////////////////////////////////////////////
+      // 💿 Next, add files to this object, just like files in a real app,
+      // `createFixture` will make an app and run your tests against it.
+      ////////////////////////////////////////////////////////////////////////////
+      files: {
+        "app/components/counter.tsx": js`
+          import { useState } from "react";
+  
+          export default function Counter({ id }) {
+            let [count, setCount] = useState(0);
+            return (
+              <div>
+                <button id={"increment-"+id} onClick={() => setCount((c) => c+1)}>Increment</button>
+                <p id={"count-"+id}>{count}</p>
+              </div>
+            )
+          }
+        `,
+        "app/components/interactive.tsx": js`
+          import { useEffect, useState } from "react";
+  
+          export default function Interactive() {
+            let [interactive, setInteractive] = useState(false);
+            useEffect(() => {
+              setInteractive(true);
+            }, []);
+            return interactive ? (
+              <div id="interactive">
+                <p>interactive</p>
+              </div>
+            ) : null;
+          }
+        `,
+        "app/root.tsx": js`
+          import { defer } from "@remix-run/node";
+          import { Links, Meta, Outlet, Scripts, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+          import Interactive from "~/components/interactive";
+  
+          export const meta: MetaFunction = () => ({
+            charset: "utf-8",
+            title: "New Remix App",
+            viewport: "width=device-width,initial-scale=1",
+          });
+  
+          export const loader = () => defer({
+            id: "${ROOT_ID}",
+          });
+  
+          export default function Root() {
+            let { id } = useLoaderData();
+            return (
+              <html lang="en">
+                <head>
+                  <Meta />
+                  <Links />
+                </head>
+                <body>
+                  <div id={id}>
+                    <p>{id}</p>
+                    <Counter id={id} />
+                    <Outlet />
+                    <Interactive />
+                  </div>
+                  <Scripts />
+                  {/* Send arbitrary data so safari renders the initial shell before
+                      the document finishes downloading. */}
+                  {Array(10000).fill(null).map((_, i)=><p key={i}>YOOOOOOOOOO   {i}</p>)}
+                </body>
+              </html>
+            );
+          }
+        `,
+
+        "app/routes/index.tsx": js`
+          import { defer } from "@remix-run/node";
+          import { Link, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+  
+          export function loader() {
+            return defer({
+              id: "${INDEX_ID}",
+            });
+          }
+  
+          export default function Index() {
+            let { id } = useLoaderData();
+            return (
+              <div id={id}>
+                <p>{id}</p>
+                <Counter id={id} />
+
+                <ul>
+                  <li><Link to="/deferred-script-resolved">deferred-script-resolved</Link></li>
+                  <li><Link to="/deferred-script-unresolved">deferred-script-unresolved</Link></li>
+                  <li><Link to="/deferred-script-rejected">deferred-script-rejected</Link></li>
+                  <li><Link to="/deferred-script-unrejected">deferred-script-unrejected</Link></li>
+                  <li><Link to="/deferred-script-rejected-no-error-element">deferred-script-rejected-no-error-element</Link></li>
+                  <li><Link to="/deferred-script-unrejected-no-error-element">deferred-script-unrejected-no-error-element</Link></li>
+                </ul>
+              </div>
+            );
+          }
+        `,
+
+        "app/routes/deferred-noscript-resolved.tsx": js`
+          import { Suspense } from "react";
+          import { defer } from "@remix-run/node";
+          import { Await, Link, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+  
+          export function loader() {
+            return defer({
+              deferredId: "${DEFERRED_ID}",
+              resolvedId: Promise.resolve("${RESOLVED_DEFERRED_ID}"),
+            });
+          }
+  
+          export default function Deferred() {
+            let { deferredId, resolvedId } = useLoaderData();
+            return (
+              <div id={deferredId}>
+                <p>{deferredId}</p>
+                <Counter id={deferredId} />
+                <Suspense fallback={<div id="${FALLBACK_ID}">fallback</div>}>
+                  <Await
+                    resolve={resolvedId}
+                    children={(resolvedDeferredId) => (
+                      <div id={resolvedDeferredId}>
+                        <p>{resolvedDeferredId}</p>
+                        <Counter id={resolvedDeferredId} />
+                      </div>
+                    )}
+                  />
+                </Suspense>
+              </div>
+            );
+          }
+        `,
+
+        "app/routes/deferred-noscript-unresolved.tsx": js`
+          import { Suspense } from "react";
+          import { defer } from "@remix-run/node";
+          import { Await, Link, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+  
+          export function loader() {
+            return defer({
+              deferredId: "${DEFERRED_ID}",
+              resolvedId: new Promise(
+                (resolve) => setTimeout(() => {
+                  resolve("${RESOLVED_DEFERRED_ID}");
+                }, 10)
+              ),
+            });
+          }
+  
+          export default function Deferred() {
+            let { deferredId, resolvedId } = useLoaderData();
+            return (
+              <div id={deferredId}>
+                <p>{deferredId}</p>
+                <Counter id={deferredId} />
+                <Suspense fallback={<div id="${FALLBACK_ID}">fallback</div>}>
+                  <Await
+                    resolve={resolvedId}
+                    children={(resolvedDeferredId) => (
+                      <div id={resolvedDeferredId}>
+                        <p>{resolvedDeferredId}</p>
+                        <Counter id={resolvedDeferredId} />
+                      </div>
+                    )}
+                  />
+                </Suspense>
+              </div>
+            );
+          }
+        `,
+
+        "app/routes/deferred-script-resolved.tsx": js`
+          import { Suspense } from "react";
+          import { defer } from "@remix-run/node";
+          import { Await, Link, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+  
+          export function loader() {
+            return defer({
+              deferredId: "${DEFERRED_ID}",
+              resolvedId: Promise.resolve("${RESOLVED_DEFERRED_ID}"),
+            });
+          }
+  
+          export default function Deferred() {
+            let { deferredId, resolvedId } = useLoaderData();
+            return (
+              <div id={deferredId}>
+                <p>{deferredId}</p>
+                <Counter id={deferredId} />
+                <Suspense fallback={<div id="${FALLBACK_ID}">fallback</div>}>
+                  <Await
+                    resolve={resolvedId}
+                    children={(resolvedDeferredId) => (
+                      <div id={resolvedDeferredId}>
+                        <p>{resolvedDeferredId}</p>
+                        <Counter id={resolvedDeferredId} />
+                      </div>
+                    )}
+                  />
+                </Suspense>
+              </div>
+            );
+          }
+        `,
+
+        "app/routes/deferred-script-unresolved.tsx": js`
+          import { Suspense } from "react";
+          import { defer } from "@remix-run/node";
+          import { Await, Link, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+  
+          export function loader() {
+            return defer({
+              deferredId: "${DEFERRED_ID}",
+              resolvedId: new Promise(
+                (resolve) => setTimeout(() => {
+                  resolve("${RESOLVED_DEFERRED_ID}");
+                }, 10)
+              ),
+            });
+          }
+  
+          export default function Deferred() {
+            let { deferredId, resolvedId } = useLoaderData();
+            return (
+              <div id={deferredId}>
+                <p>{deferredId}</p>
+                <Counter id={deferredId} />
+                <Suspense fallback={<div id="${FALLBACK_ID}">fallback</div>}>
+                  <Await
+                    resolve={resolvedId}
+                    children={(resolvedDeferredId) => (
+                      <div id={resolvedDeferredId}>
+                        <p>{resolvedDeferredId}</p>
+                        <Counter id={resolvedDeferredId} />
+                      </div>
+                    )}
+                  />
+                </Suspense>
+              </div>
+            );
+          }
+        `,
+
+        "app/routes/deferred-script-rejected.tsx": js`
+          import { Suspense } from "react";
+          import { defer } from "@remix-run/node";
+          import { Await, Link, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+  
+          export function loader() {
+            return defer({
+              deferredId: "${DEFERRED_ID}",
+              resolvedId: Promise.reject(new Error("${RESOLVED_DEFERRED_ID}")),
+            });
+          }
+  
+          export default function Deferred() {
+            let { deferredId, resolvedId } = useLoaderData();
+            return (
+              <div id={deferredId}>
+                <p>{deferredId}</p>
+                <Counter id={deferredId} />
+                <Suspense fallback={<div id="${FALLBACK_ID}">fallback</div>}>
+                  <Await
+                    resolve={resolvedId}
+                    errorElement={
+                      <div id="${ERROR_ID}">
+                        error
+                        <Counter id="${ERROR_ID}" />
+                      </div>
+                    }
+                    children={(resolvedDeferredId) => (
+                      <div id={resolvedDeferredId}>
+                        <p>{resolvedDeferredId}</p>
+                        <Counter id={resolvedDeferredId} />
+                      </div>
+                    )}
+                  />
+                </Suspense>
+              </div>
+            );
+          }
+        `,
+
+        "app/routes/deferred-script-unrejected.tsx": js`
+          import { Suspense } from "react";
+          import { defer } from "@remix-run/node";
+          import { Await, Link, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+  
+          export function loader() {
+            return defer({
+              deferredId: "${DEFERRED_ID}",
+              resolvedId: new Promise(
+                (_, reject) => setTimeout(() => {
+                  reject(new Error("${RESOLVED_DEFERRED_ID}"));
+                }, 10)
+              ),
+            });
+          }
+  
+          export default function Deferred() {
+            let { deferredId, resolvedId } = useLoaderData();
+            return (
+              <div id={deferredId}>
+                <p>{deferredId}</p>
+                <Counter id={deferredId} />
+                <Suspense fallback={<div id="${FALLBACK_ID}">fallback</div>}>
+                  <Await
+                    resolve={resolvedId}
+                    errorElement={
+                      <div id="${ERROR_ID}">
+                        error
+                        <Counter id="${ERROR_ID}" />
+                      </div>
+                    }
+                    children={(resolvedDeferredId) => (
+                      <div id={resolvedDeferredId}>
+                        <p>{resolvedDeferredId}</p>
+                        <Counter id={resolvedDeferredId} />
+                      </div>
+                    )}
+                  />
+                </Suspense>
+              </div>
+            );
+          }
+        `,
+
+        "app/routes/deferred-script-rejected-no-error-element.tsx": js`
+          import { Suspense } from "react";
+          import { defer } from "@remix-run/node";
+          import { Await, Link, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+  
+          export function loader() {
+            return defer({
+              deferredId: "${DEFERRED_ID}",
+              resolvedId: Promise.reject(new Error("${RESOLVED_DEFERRED_ID}")),
+            });
+          }
+  
+          export default function Deferred() {
+            let { deferredId, resolvedId } = useLoaderData();
+            return (
+              <div id={deferredId}>
+                <p>{deferredId}</p>
+                <Counter id={deferredId} />
+                <Suspense fallback={<div id="${FALLBACK_ID}">fallback</div>}>
+                  <Await
+                    resolve={resolvedId}
+                    children={(resolvedDeferredId) => (
+                      <div id={resolvedDeferredId}>
+                        <p>{resolvedDeferredId}</p>
+                        <Counter id={resolvedDeferredId} />
+                      </div>
+                    )}
+                  />
+                </Suspense>
+              </div>
+            );
+          }
+
+          export function ErrorBoundary() {
+            return (
+              <div id="${ERROR_BOUNDARY_ID}">
+                error
+                <Counter id="${ERROR_BOUNDARY_ID}" />
+              </div>
+            );
+          }
+        `,
+
+        "app/routes/deferred-script-unrejected-no-error-element.tsx": js`
+          import { Suspense } from "react";
+          import { defer } from "@remix-run/node";
+          import { Await, Link, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+  
+          export function loader() {
+            return defer({
+              deferredId: "${DEFERRED_ID}",
+              resolvedId: new Promise(
+                (_, reject) => setTimeout(() => {
+                  reject(new Error("${RESOLVED_DEFERRED_ID}"));
+                }, 10)
+              ),
+            });
+          }
+  
+          export default function Deferred() {
+            let { deferredId, resolvedId } = useLoaderData();
+            return (
+              <div id={deferredId}>
+                <p>{deferredId}</p>
+                <Counter id={deferredId} />
+                <Suspense fallback={<div id="${FALLBACK_ID}">fallback</div>}>
+                  <Await
+                    resolve={resolvedId}
+                    children={(resolvedDeferredId) => (
+                      <div id={resolvedDeferredId}>
+                        <p>{resolvedDeferredId}</p>
+                        <Counter id={resolvedDeferredId} />
+                      </div>
+                    )}
+                  />
+                </Suspense>
+              </div>
+            );
+          }
+
+          export function ErrorBoundary() {
+            return (
+              <div id="${ERROR_BOUNDARY_ID}">
+                error
+                <Counter id="${ERROR_BOUNDARY_ID}" />
+              </div>
+            );
+          }
+        `,
+
+        "app/routes/deferred-manual-resolve.tsx": js`
+          import { Suspense } from "react";
+          import { defer } from "@remix-run/node";
+          import { Await, Link, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+  
+          export function loader() {
+            global.__deferredManualResolveCache = global.__deferredManualResolveCache || {
+              nextId: 1,
+              deferreds: {},
+            };
+  
+            let id = "" + global.__deferredManualResolveCache.nextId++;
+            let promise = new Promise((resolve, reject) => {
+              global.__deferredManualResolveCache.deferreds[id] = { resolve, reject };
+            });
+  
+            return defer({
+              deferredId: "${DEFERRED_ID}",
+              resolvedId: new Promise(
+                (resolve) => setTimeout(() => {
+                  resolve("${RESOLVED_DEFERRED_ID}");
+                }, 10)
+              ),
+              id,
+              manualValue: promise,
+            });
+          }
+  
+          export default function Deferred() {
+            let { deferredId, resolvedId, id, manualValue } = useLoaderData();
+            return (
+              <div id={deferredId}>
+                <p>{deferredId}</p>
+                <Counter id={deferredId} />
+                <Suspense fallback={<div id="${FALLBACK_ID}">fallback</div>}>
+                  <Await
+                    resolve={resolvedId}
+                    children={(resolvedDeferredId) => (
+                      <div>
+                        <p id={resolvedDeferredId}>{id}</p>
+                        <Counter id={resolvedDeferredId} />
+                      </div>
+                    )}
+                  />
+                </Suspense>
+                <Suspense fallback={<div id="${MANUAL_FALLBACK_ID}">manual fallback</div>}>
+                  <Await
+                    resolve={manualValue}
+                    errorElement={
+                      <div id="${MANUAL_ERROR_ID}">
+                        error
+                        <Counter id="${MANUAL_ERROR_ID}" />
+                      </div>
+                    }
+                    children={(value) => (
+                      <div>
+                        <pre><code id="${MANUAL_RESOLVED_ID}">{JSON.stringify(value)}</code></pre>
+                        <Counter id="${MANUAL_RESOLVED_ID}" />
+                      </div>
+                    )}
+                  />
+                </Suspense>
+              </div>
+            );
+          }
+        `,
+      },
+    });
+
+    // This creates an interactive app using puppeteer.
+    appFixture = await createAppFixture(fixture);
+  });
+
+  test.afterAll(() => {
+    appFixture.close();
+  });
+
+  test("works with critical JSON like data", async ({ page }) => {
+    let response = await fixture.requestDocument("/");
+    let html = await response.text();
+    let criticalHTML = html.slice(0, html.indexOf("</html>") + 7);
+    expect(criticalHTML).toContain(ROOT_ID);
+    expect(criticalHTML).toContain(INDEX_ID);
+    let deferredHTML = html.slice(html.indexOf("</html>") + 7);
+    expect(deferredHTML).toBe("");
+
+    let app = new PlaywrightFixture(appFixture, page);
+    let assertConsole = monitorConsole(page);
+    await app.goto("/");
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${INDEX_ID}`);
+
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, INDEX_ID);
+
+    await assertConsole();
+  });
+
+  test("resolved promises render in initial payload", async ({ page }) => {
+    let response = await fixture.requestDocument("/deferred-noscript-resolved");
+    let html = await response.text();
+    let criticalHTML = html.slice(0, html.indexOf("</html>") + 7);
+    expect(criticalHTML).toContain(ROOT_ID);
+    expect(criticalHTML).toContain(DEFERRED_ID);
+    expect(criticalHTML).not.toContain(FALLBACK_ID);
+    expect(criticalHTML).toContain(RESOLVED_DEFERRED_ID);
+    let deferredHTML = html.slice(html.indexOf("</html>") + 7);
+    expect(deferredHTML).toBe("");
+
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/deferred-noscript-resolved");
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${DEFERRED_ID}`);
+    await page.waitForSelector(`#${RESOLVED_DEFERRED_ID}`);
+  });
+
+  test("slow promises render in subsequent payload", async ({ page }) => {
+    let response = await fixture.requestDocument(
+      "/deferred-noscript-unresolved"
+    );
+    let html = await response.text();
+    let criticalHTML = html.slice(0, html.indexOf("</html>") + 7);
+    expect(criticalHTML).toContain(ROOT_ID);
+    expect(criticalHTML).toContain(DEFERRED_ID);
+    expect(criticalHTML).toContain(FALLBACK_ID);
+    expect(criticalHTML).not.toContain(RESOLVED_DEFERRED_ID);
+    let deferredHTML = html.slice(html.indexOf("</html>") + 7);
+    expect(deferredHTML).toContain(RESOLVED_DEFERRED_ID);
+
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/deferred-noscript-unresolved");
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${DEFERRED_ID}`);
+    await page.waitForSelector(`#${RESOLVED_DEFERRED_ID}`);
+  });
+
+  test("resolved promises render in initial payload and hydrates", async ({
+    page,
+  }) => {
+    let response = await fixture.requestDocument("/deferred-script-resolved");
+    let html = await response.text();
+    let criticalHTML = html.slice(0, html.indexOf("</html>") + 7);
+    expect(criticalHTML).toContain(ROOT_ID);
+    expect(criticalHTML).toContain(DEFERRED_ID);
+    expect(criticalHTML).not.toContain(FALLBACK_ID);
+    expect(criticalHTML).toContain(RESOLVED_DEFERRED_ID);
+    let deferredHTML = html.slice(html.indexOf("</html>") + 7);
+    expect(deferredHTML).toBe("");
+
+    let app = new PlaywrightFixture(appFixture, page);
+    let assertConsole = monitorConsole(page);
+    await app.goto("/deferred-script-resolved", true);
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${DEFERRED_ID}`);
+    await page.waitForSelector(`#${RESOLVED_DEFERRED_ID}`);
+
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, DEFERRED_ID);
+    await ensureInteractivity(page, RESOLVED_DEFERRED_ID);
+
+    await assertConsole();
+  });
+
+  test("slow to resolve promises render in subsequent payload and hydrates", async ({
+    page,
+  }) => {
+    let response = await fixture.requestDocument("/deferred-script-unresolved");
+    let html = await response.text();
+    let criticalHTML = html.slice(0, html.indexOf("</html>") + 7);
+    expect(criticalHTML).toContain(ROOT_ID);
+    expect(criticalHTML).toContain(DEFERRED_ID);
+    expect(criticalHTML).toContain(FALLBACK_ID);
+    expect(criticalHTML).not.toContain(RESOLVED_DEFERRED_ID);
+    let deferredHTML = html.slice(html.indexOf("</html>") + 7);
+    expect(deferredHTML).toContain(RESOLVED_DEFERRED_ID);
+
+    let app = new PlaywrightFixture(appFixture, page);
+    let assertConsole = monitorConsole(page);
+    await app.goto("/deferred-script-unresolved", true);
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${DEFERRED_ID}`);
+    await page.waitForSelector(`#${RESOLVED_DEFERRED_ID}`);
+
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, DEFERRED_ID);
+    await ensureInteractivity(page, RESOLVED_DEFERRED_ID);
+
+    await assertConsole();
+  });
+
+  test("rejected promises render in initial payload and hydrates", async ({
+    page,
+  }) => {
+    let response = await fixture.requestDocument("/deferred-script-rejected");
+    let html = await response.text();
+    let criticalHTML = html.slice(0, html.indexOf("</html>") + 7);
+    expect(criticalHTML).toContain(ROOT_ID);
+    expect(criticalHTML).toContain(DEFERRED_ID);
+    expect(criticalHTML).not.toContain(FALLBACK_ID);
+    expect(criticalHTML).toContain(ERROR_ID);
+    let deferredHTML = html.slice(html.indexOf("</html>") + 7);
+    expect(deferredHTML).toBe("");
+
+    let app = new PlaywrightFixture(appFixture, page);
+    let assertConsole = monitorConsole(page);
+    await app.goto("/deferred-script-rejected", true);
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${DEFERRED_ID}`);
+    await page.waitForSelector(`#${ERROR_ID}`);
+
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, DEFERRED_ID);
+    await ensureInteractivity(page, ERROR_ID);
+
+    await assertConsole();
+  });
+
+  test("slow to reject promises render in subsequent payload and hydrates", async ({
+    page,
+  }) => {
+    let response = await fixture.requestDocument("/deferred-script-unrejected");
+    let html = await response.text();
+    let criticalHTML = html.slice(0, html.indexOf("</html>") + 7);
+    expect(criticalHTML).toContain(ROOT_ID);
+    expect(criticalHTML).toContain(DEFERRED_ID);
+    expect(criticalHTML).toContain(FALLBACK_ID);
+    expect(criticalHTML).not.toContain(ERROR_ID);
+    let deferredHTML = html.slice(html.indexOf("</html>") + 7);
+    expect(deferredHTML).toContain(ERROR_ID);
+
+    let app = new PlaywrightFixture(appFixture, page);
+    let assertConsole = monitorConsole(page);
+    await app.goto("/deferred-script-unrejected", true);
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${DEFERRED_ID}`);
+    await page.waitForSelector(`#${ERROR_ID}`);
+
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, DEFERRED_ID);
+    await ensureInteractivity(page, ERROR_ID);
+
+    await assertConsole();
+  });
+
+  test("rejected promises bubble to ErrorBoundary on hydrate", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/deferred-script-rejected-no-error-element", true);
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${ERROR_BOUNDARY_ID}`);
+
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, ERROR_BOUNDARY_ID);
+  });
+
+  test("slow to reject promises bubble to ErrorBoundary on hydrate", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/deferred-script-unrejected-no-error-element", true);
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${ERROR_BOUNDARY_ID}`);
+
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, ERROR_BOUNDARY_ID);
+  });
+
+  test("routes are interactive when deferred promises are suspended and after resolve in subsequent payload", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let assertConsole = monitorConsole(page);
+    app.goto("/deferred-manual-resolve");
+
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${DEFERRED_ID}`);
+    await page.waitForSelector(`#${MANUAL_FALLBACK_ID}`);
+    let idElement = await page.waitForSelector(`#${RESOLVED_DEFERRED_ID}`);
+    let id = await idElement.innerText();
+    expect(id).toBeTruthy();
+
+    // Ensure the deferred promise is suspended
+    await page.waitForSelector(`#${MANUAL_RESOLVED_ID}`, { state: "hidden" });
+
+    await page.waitForSelector("#interactive");
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, DEFERRED_ID);
+    await ensureInteractivity(page, RESOLVED_DEFERRED_ID);
+
+    global.__deferredManualResolveCache.deferreds[id].resolve("value");
+
+    await ensureInteractivity(page, MANUAL_RESOLVED_ID);
+    await ensureInteractivity(page, RESOLVED_DEFERRED_ID, 2);
+    await ensureInteractivity(page, DEFERRED_ID, 2);
+    await ensureInteractivity(page, ROOT_ID, 2);
+
+    await assertConsole();
+  });
+
+  test("routes are interactive when deferred promises are suspended and after rejection in subsequent payload", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let assertConsole = monitorConsole(page);
+    await app.goto("/deferred-manual-resolve");
+
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${DEFERRED_ID}`);
+    await page.waitForSelector(`#${MANUAL_FALLBACK_ID}`);
+    let idElement = await page.waitForSelector(`#${RESOLVED_DEFERRED_ID}`);
+    let id = await idElement.innerText();
+    expect(id).toBeTruthy();
+
+    await page.waitForSelector("#interactive");
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, DEFERRED_ID);
+    await ensureInteractivity(page, RESOLVED_DEFERRED_ID);
+
+    global.__deferredManualResolveCache.deferreds[id].reject(
+      new Error("error")
+    );
+
+    await ensureInteractivity(page, ROOT_ID, 2);
+    await ensureInteractivity(page, DEFERRED_ID, 2);
+    await ensureInteractivity(page, RESOLVED_DEFERRED_ID, 2);
+    await ensureInteractivity(page, MANUAL_ERROR_ID);
+
+    await assertConsole();
+  });
+
+  test("client transition with resolved promises work", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let assertConsole = monitorConsole(page);
+    await app.goto("/");
+
+    await page.waitForSelector("#interactive");
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, INDEX_ID);
+
+    await app.clickLink("/deferred-script-resolved");
+
+    await ensureInteractivity(page, ROOT_ID, 2);
+    await ensureInteractivity(page, DEFERRED_ID);
+    await ensureInteractivity(page, RESOLVED_DEFERRED_ID);
+
+    await assertConsole();
+  });
+
+  test("client transition with unresolved promises work", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let assertConsole = monitorConsole(page);
+    await app.goto("/");
+
+    await page.waitForSelector("#interactive");
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, INDEX_ID);
+
+    await app.clickLink("/deferred-script-unresolved");
+
+    await ensureInteractivity(page, ROOT_ID, 2);
+    await ensureInteractivity(page, DEFERRED_ID);
+    await ensureInteractivity(page, RESOLVED_DEFERRED_ID);
+
+    await assertConsole();
+  });
+
+  test("client transition with rejected promises work", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let assertConsole = monitorConsole(page);
+    await app.goto("/");
+
+    await page.waitForSelector("#interactive");
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, INDEX_ID);
+
+    app.clickLink("/deferred-script-rejected");
+
+    await ensureInteractivity(page, DEFERRED_ID);
+    await ensureInteractivity(page, ERROR_ID);
+    await ensureInteractivity(page, DEFERRED_ID, 2);
+    await ensureInteractivity(page, ROOT_ID, 2);
+
+    await assertConsole();
+  });
+
+  test("client transition with unrejected promises work", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let assertConsole = monitorConsole(page);
+    await app.goto("/");
+
+    await page.waitForSelector("#interactive");
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, INDEX_ID);
+
+    await app.clickLink("/deferred-script-unrejected");
+
+    await ensureInteractivity(page, DEFERRED_ID);
+    await ensureInteractivity(page, ERROR_ID);
+    await ensureInteractivity(page, DEFERRED_ID, 2);
+    await ensureInteractivity(page, ROOT_ID, 2);
+
+    await assertConsole();
+  });
+
+  test("client transition with rejected promises bubble to ErrorBoundary", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/");
+
+    await page.waitForSelector("#interactive");
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, INDEX_ID);
+
+    await app.clickLink("/deferred-script-rejected-no-error-element");
+
+    await ensureInteractivity(page, ERROR_BOUNDARY_ID);
+    await ensureInteractivity(page, ROOT_ID, 2);
+  });
+
+  test("client transition with unrejected promises bubble to ErrorBoundary", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/");
+
+    await page.waitForSelector("#interactive");
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, INDEX_ID);
+
+    await app.clickLink("/deferred-script-unrejected-no-error-element");
+
+    await ensureInteractivity(page, ERROR_BOUNDARY_ID);
+    await ensureInteractivity(page, ROOT_ID, 2);
+  });
+});
+
+test.describe("aborted", () => {
+  let fixture: Fixture;
+  let appFixture: AppFixture;
+
+  test.beforeAll(async () => {
+    fixture = await createFixture({
+      ////////////////////////////////////////////////////////////////////////////
+      // 💿 Next, add files to this object, just like files in a real app,
+      // `createFixture` will make an app and run your tests against it.
+      ////////////////////////////////////////////////////////////////////////////
+      files: {
+        "app/entry.server.tsx": js`
+          import { PassThrough } from "stream";
+          import type { EntryContext } from "@remix-run/node";
+          import { Response } from "@remix-run/node";
+          import { RemixServer } from "@remix-run/react";
+          import isbot from "isbot";
+          import { renderToPipeableStream } from "react-dom/server";
+          
+          const ABORT_DELAY = 1;
+          
+          export default function handleRequest(
+            request: Request,
+            responseStatusCode: number,
+            responseHeaders: Headers,
+            remixContext: EntryContext
+          ) {
+            return isbot(request.headers.get("user-agent"))
+              ? handleBotRequest(
+                  request,
+                  responseStatusCode,
+                  responseHeaders,
+                  remixContext
+                )
+              : handleBrowserRequest(
+                  request,
+                  responseStatusCode,
+                  responseHeaders,
+                  remixContext
+                );
+          }
+          
+          function handleBotRequest(
+            request: Request,
+            responseStatusCode: number,
+            responseHeaders: Headers,
+            remixContext: EntryContext
+          ) {
+            return new Promise((resolve, reject) => {
+              let didError = false;
+          
+              let { pipe, abort } = renderToPipeableStream(
+                <RemixServer
+                  context={remixContext}
+                  url={request.url}
+                  abortDelay={ABORT_DELAY}
+                />,
+                {
+                  onAllReady() {
+                    let body = new PassThrough();
+          
+                    responseHeaders.set("Content-Type", "text/html");
+          
+                    resolve(
+                      new Response(body, {
+                        headers: responseHeaders,
+                        status: didError ? 500 : responseStatusCode,
+                      })
+                    );
+          
+                    pipe(body);
+                  },
+                  onShellError(error: unknown) {
+                    reject(error);
+                  },
+                  onError(error: unknown) {
+                    didError = true;
+          
+                    console.error(error);
+                  },
+                }
+              );
+          
+              setTimeout(abort, ABORT_DELAY);
+            });
+          }
+          
+          function handleBrowserRequest(
+            request: Request,
+            responseStatusCode: number,
+            responseHeaders: Headers,
+            remixContext: EntryContext
+          ) {
+            return new Promise((resolve, reject) => {
+              let didError = false;
+          
+              let { pipe, abort } = renderToPipeableStream(
+                <RemixServer
+                  context={remixContext}
+                  url={request.url}
+                  abortDelay={ABORT_DELAY}
+                />,
+                {
+                  onShellReady() {
+                    let body = new PassThrough();
+          
+                    responseHeaders.set("Content-Type", "text/html");
+          
+                    resolve(
+                      new Response(body, {
+                        headers: responseHeaders,
+                        status: didError ? 500 : responseStatusCode,
+                      })
+                    );
+          
+                    pipe(body);
+                  },
+                  onShellError(err: unknown) {
+                    reject(err);
+                  },
+                  onError(error: unknown) {
+                    didError = true;
+          
+                    console.error(error);
+                  },
+                }
+              );
+          
+              setTimeout(abort, ABORT_DELAY);
+            });
+          }        
+        `,
+        "app/components/counter.tsx": js`
+          import { useState } from "react";
+  
+          export default function Counter({ id }) {
+            let [count, setCount] = useState(0);
+            return (
+              <div>
+                <button id={"increment-"+id} onClick={() => setCount((c) => c+1)}>Increment</button>
+                <p id={"count-"+id}>{count}</p>
+              </div>
+            )
+          }
+        `,
+        "app/components/interactive.tsx": js`
+          import { useEffect, useState } from "react";
+  
+          export default function Interactive() {
+            let [interactive, setInteractive] = useState(false);
+            useEffect(() => {
+              setInteractive(true);
+            }, []);
+            return interactive ? (
+              <div id="interactive">
+                <p>interactive</p>
+              </div>
+            ) : null;
+          }
+        `,
+        "app/root.tsx": js`
+          import { defer } from "@remix-run/node";
+          import { Links, Meta, Outlet, Scripts, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+          import Interactive from "~/components/interactive";
+  
+          export const meta: MetaFunction = () => ({
+            charset: "utf-8",
+            title: "New Remix App",
+            viewport: "width=device-width,initial-scale=1",
+          });
+  
+          export const loader = () => defer({
+            id: "${ROOT_ID}",
+          });
+  
+          export default function Root() {
+            let { id } = useLoaderData();
+            return (
+              <html lang="en">
+                <head>
+                  <Meta />
+                  <Links />
+                </head>
+                <body>
+                  <div id={id}>
+                    <p>{id}</p>
+                    <Counter id={id} />
+                    <Outlet />
+                    <Interactive />
+                  </div>
+                  <Scripts />
+                  {/* Send arbitrary data so safari renders the initial shell before
+                      the document finishes downloading. */}
+                  {Array(6000).fill(null).map((_, i)=><p key={i}>YOOOOOOOOOO   {i}</p>)}
+                </body>
+              </html>
+            );
+          }
+        `,
+
+        "app/routes/deferred-server-aborted.tsx": js`
+          import { Suspense } from "react";
+          import { defer } from "@remix-run/node";
+          import { Await, Link, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+  
+          export function loader() {
+            return defer({
+              deferredId: "${DEFERRED_ID}",
+              resolvedId: new Promise(
+                (resolve) => setTimeout(() => {
+                  resolve("${RESOLVED_DEFERRED_ID}");
+                }, 10000)
+              ),
+            });
+          }
+  
+          export default function Deferred() {
+            let { deferredId, resolvedId } = useLoaderData();
+            return (
+              <div id={deferredId}>
+                <p>{deferredId}</p>
+                <Counter id={deferredId} />
+                <Suspense fallback={<div id="${FALLBACK_ID}">fallback</div>}>
+                  <Await
+                    resolve={resolvedId}
+                    errorElement={
+                      <div id="${ERROR_ID}">
+                        error
+                        <Counter id="${ERROR_ID}" />
+                      </div>
+                    }
+                    children={(resolvedDeferredId) => (
+                      <div id={resolvedDeferredId}>
+                        <p>{resolvedDeferredId}</p>
+                        <Counter id={resolvedDeferredId} />
+                      </div>
+                    )}
+                  />
+                </Suspense>
+              </div>
+            );
+          }
+        `,
+
+        "app/routes/deferred-server-aborted-no-error-element.tsx": js`
+          import { Suspense } from "react";
+          import { defer } from "@remix-run/node";
+          import { Await, Link, useLoaderData } from "@remix-run/react";
+          import Counter from "~/components/counter";
+  
+          export function loader() {
+            return defer({
+              deferredId: "${DEFERRED_ID}",
+              resolvedId: new Promise(
+                (resolve) => setTimeout(() => {
+                  resolve("${RESOLVED_DEFERRED_ID}");
+                }, 10000)
+              ),
+            });
+          }
+  
+          export default function Deferred() {
+            let { deferredId, resolvedId } = useLoaderData();
+            return (
+              <div id={deferredId}>
+                <p>{deferredId}</p>
+                <Counter id={deferredId} />
+                <Suspense fallback={<div id="${FALLBACK_ID}">fallback</div>}>
+                  <Await
+                    resolve={resolvedId}
+                    children={(resolvedDeferredId) => (
+                      <div id={resolvedDeferredId}>
+                        <p>{resolvedDeferredId}</p>
+                        <Counter id={resolvedDeferredId} />
+                      </div>
+                    )}
+                  />
+                </Suspense>
+              </div>
+            );
+          }
+
+          export function ErrorBoundary() {
+            return (
+              <div id="${ERROR_BOUNDARY_ID}">
+                error
+                <Counter id="${ERROR_BOUNDARY_ID}" />
+              </div>
+            );
+          }
+        `,
+      },
+    });
+
+    // This creates an interactive app using puppeteer.
+    appFixture = await createAppFixture(fixture);
+  });
+
+  test.afterAll(() => {
+    appFixture.close();
+  });
+
+  test("server aborts render the errorElement", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/deferred-server-aborted");
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${DEFERRED_ID}`);
+    await page.waitForSelector(`#${ERROR_ID}`);
+
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, DEFERRED_ID);
+    await ensureInteractivity(page, ERROR_ID);
+  });
+
+  test("server aborts render the ErrorBoundary when no errorElement", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/deferred-server-aborted-no-error-element");
+    await page.waitForSelector(`#${ROOT_ID}`);
+    await page.waitForSelector(`#${ERROR_BOUNDARY_ID}`);
+
+    await ensureInteractivity(page, ROOT_ID);
+    await ensureInteractivity(page, ERROR_BOUNDARY_ID);
+  });
+});
+
+async function ensureInteractivity(page: Page, id: string, expect: number = 1) {
+  await page.waitForSelector("#interactive");
+  let increment = await page.waitForSelector("#increment-" + id);
+  await increment.click();
+  await page.waitForSelector(`#count-${id}:has-text('${expect}')`);
+}
+
+function monitorConsole(page: Page) {
+  let messages: ConsoleMessage[] = [];
+  page.on("console", (message) => {
+    messages.push(message);
+  });
+
+  return async () => {
+    if (!messages.length) return;
+    let errors: string[] = [];
+    for (let message of messages) {
+      let logs = [];
+      let args = message.args();
+      if (args[0]) {
+        let arg0 = await args[0].jsonValue();
+        if (
+          typeof arg0 === "string" &&
+          arg0.includes("Download the React DevTools")
+        ) {
+          continue;
+        }
+        logs.push(arg0);
+      }
+      errors.push(
+        `Unexpected console.log(${JSON.stringify(logs).slice(1, -1)})`
+      );
+    }
+    if (errors.length) {
+      throw new Error(`Unexpected console.log's:\n` + errors.join("\n") + "\n");
+    }
+  };
+}
diff --git a/integration/helpers/node-template/app/entry.server.tsx b/integration/helpers/node-template/app/entry.server.tsx
index 1da4459a9f7..6a43239c7cf 100644
--- a/integration/helpers/node-template/app/entry.server.tsx
+++ b/integration/helpers/node-template/app/entry.server.tsx
@@ -38,7 +38,11 @@ function handleBotRequest(
     let didError = false;
 
     let { pipe, abort } = renderToPipeableStream(
-      <RemixServer context={remixContext} url={request.url} />,
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
       {
         onAllReady() {
           let body = new PassThrough();
@@ -79,7 +83,11 @@ function handleBrowserRequest(
     let didError = false;
 
     let { pipe, abort } = renderToPipeableStream(
-      <RemixServer context={remixContext} url={request.url} />,
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
       {
         onShellReady() {
           let body = new PassThrough();
diff --git a/packages/remix-cloudflare/index.ts b/packages/remix-cloudflare/index.ts
index 0daeb97dbcf..f17e9c2aac3 100644
--- a/packages/remix-cloudflare/index.ts
+++ b/packages/remix-cloudflare/index.ts
@@ -12,6 +12,7 @@ export {
 export {
   createRequestHandler,
   createSession,
+  defer,
   isCookie,
   isSession,
   json,
diff --git a/packages/remix-deno/index.ts b/packages/remix-deno/index.ts
index b6b6c77b5d9..9f182592cd5 100644
--- a/packages/remix-deno/index.ts
+++ b/packages/remix-deno/index.ts
@@ -15,6 +15,7 @@ export {
 
 export {
   createSession,
+  defer,
   isCookie,
   isSession,
   json,
diff --git a/packages/remix-node/index.ts b/packages/remix-node/index.ts
index 7454b9995c2..de558a97359 100644
--- a/packages/remix-node/index.ts
+++ b/packages/remix-node/index.ts
@@ -38,6 +38,7 @@ export {
 export {
   createRequestHandler,
   createSession,
+  defer,
   isCookie,
   isSession,
   json,
diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index ce280c23ca2..dcb22556338 100644
--- a/packages/remix-react/browser.tsx
+++ b/packages/remix-react/browser.tsx
@@ -20,6 +20,8 @@ declare global {
   var __remixContext: {
     state: HydrationState;
     future: FutureConfig;
+    // The number of active deferred keys rendered on the server
+    a?: number;
   };
   var __remixRouteModules: RouteModules;
   var __remixManifest: EntryContext["manifest"];
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index fadac712ac0..fb2dc537e5b 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -6,8 +6,10 @@ import type {
 import * as React from "react";
 import type {
   AgnosticDataRouteMatch,
+  UNSAFE_DeferredData as DeferredData,
   ErrorResponse,
   Navigation,
+  TrackedPromise,
 } from "@remix-run/router";
 import type {
   LinkProps,
@@ -20,12 +22,14 @@ import type {
   SubmitFunction,
 } from "react-router-dom";
 import {
+  Await,
   Link as RouterLink,
   NavLink as RouterNavLink,
   UNSAFE_DataRouterContext as DataRouterContext,
   UNSAFE_DataRouterStateContext as DataRouterStateContext,
   isRouteErrorResponse,
   matchRoutes,
+  useAsyncError,
   useFetcher as useFetcherRR,
   useFetchers as useFetchersRR,
   useActionData as useActionDataRR,
@@ -56,7 +60,7 @@ import {
   isPageLinkDescriptor,
 } from "./links";
 import type { HtmlLinkDescriptor, PrefetchPageDescriptor } from "./links";
-import { createHtml } from "./markup";
+import { createHtml, escapeHtml } from "./markup";
 import type {
   RouteMatchWithMeta,
   V1_HtmlMetaDescriptor,
@@ -765,8 +769,8 @@ export type ScriptProps = Omit<
  * @see https://remix.run/api/remix#meta-links-scripts
  */
 export function Scripts(props: ScriptProps) {
-  let { manifest, serverHandoffString } = useRemixContext();
-  let { router } = useDataRouterContext();
+  let { manifest, serverHandoffString, abortDelay } = useRemixContext();
+  let { router, static: isStatic, staticContext } = useDataRouterContext();
   let { matches } = useDataRouterStateContext();
   let navigation = useNavigation();
 
@@ -774,23 +778,122 @@ export function Scripts(props: ScriptProps) {
     isHydrated = true;
   }, []);
 
+  let deferredScripts: any[] = [];
   let initialScripts = React.useMemo(() => {
-    let contextScript = serverHandoffString
+    let contextScript = staticContext
       ? `window.__remixContext = ${serverHandoffString};`
-      : "";
-
-    let routeModulesScript = `${matches
-      .map(
-        (match, index) =>
-          `import ${JSON.stringify(manifest.url)};
+      : " ";
+
+    let activeDeferreds = staticContext?.activeDeferreds;
+    contextScript += !activeDeferreds
+      ? ""
+      : [
+          "// Add dev only comments about what these are used for",
+          "__remixContext.p = function(v,e,p,x) {",
+          "  if (typeof e !== 'undefined') {",
+          "    x=new Error(e.message);",
+          process.env.NODE_ENV === "development" ? `x.stack=e.stack;` : "",
+          "    p=Promise.reject(x);",
+          "  } else {",
+          "    p=Promise.resolve(v);",
+          "  }",
+          "  return p;",
+          "};",
+          "__remixContext.n = function(i,k) {",
+          "  __remixContext.t = __remixContext.t || {};",
+          "  __remixContext.t[i] = __remixContext.t[i] || {};",
+          "  let p = new Promise((r, e) => {__remixContext.t[i][k] = {r:(v)=>{r(v);},e:(v)=>{e(v);}};});",
+          typeof abortDelay === "number"
+            ? `setTimeout(() => {if(typeof p._error !== "undefined" || typeof p._data !== "undefined"){return;} __remixContext.t[i][k].e(new Error("Server timeout."))}, ${abortDelay});`
+            : "",
+          "  return p;",
+          "};",
+          "__remixContext.r = function(i,k,v,e,p,x) {",
+          "  p = __remixContext.t[i][k];",
+          "  if (typeof e !== 'undefined') {",
+          "    x=new Error(e.message);",
+          process.env.NODE_ENV === "development" ? `x.stack=e.stack;` : "",
+          "    p.e(x);",
+          "  } else {",
+          "    p.r(v);",
+          "  }",
+          "};",
+        ].join("\n") +
+        Object.entries(activeDeferreds)
+          .map(([routeId, deferredData]) => {
+            let pendingKeys = new Set(deferredData.pendingKeys);
+            let promiseKeyValues = deferredData.deferredKeys
+              .map((key) => {
+                if (pendingKeys.has(key)) {
+                  deferredScripts.push(
+                    <DeferredHydrationScript
+                      key={`${routeId} | ${key}`}
+                      deferredData={deferredData}
+                      routeId={routeId}
+                      dataKey={key}
+                    />
+                  );
+
+                  return `${JSON.stringify(
+                    key
+                  )}:__remixContext.n(${JSON.stringify(
+                    routeId
+                  )}, ${JSON.stringify(key)})`;
+                } else {
+                  let trackedPromise = deferredData.data[key] as TrackedPromise;
+                  if (typeof trackedPromise._error !== "undefined") {
+                    let toSerialize: { message: string; stack?: string } = {
+                      message: trackedPromise._error.message,
+                      stack: undefined,
+                    };
+                    if (process.env.NODE_ENV === "development") {
+                      toSerialize.stack = trackedPromise._error.stack;
+                    }
+                    return `${JSON.stringify(
+                      key
+                    )}:__remixContext.p(!1, ${escapeHtml(
+                      JSON.stringify(toSerialize)
+                    )})`;
+                  } else {
+                    if (typeof trackedPromise._data === "undefined") {
+                      throw new Error(
+                        `The deferred data for ${key} was not resolved, did you forget to return data from a deferred promise?`
+                      );
+                    }
+                    return `${JSON.stringify(
+                      key
+                    )}:__remixContext.p(${escapeHtml(
+                      JSON.stringify(trackedPromise._data)
+                    )})`;
+                  }
+                }
+              })
+              .join(",\n");
+            return `Object.assign(__remixContext.state.loaderData[${JSON.stringify(
+              routeId
+            )}], {${promiseKeyValues}});`;
+          })
+          .join("\n") +
+        (deferredScripts.length > 0
+          ? `__remixContext.a=${deferredScripts.length};`
+          : "");
+
+    let routeModulesScript = !isStatic
+      ? " "
+      : `${matches
+          .map(
+            (match, index) =>
+              `import ${JSON.stringify(manifest.url)};
 import * as route${index} from ${JSON.stringify(
-            manifest.routes[match.route.id].module
-          )};`
-      )
-      .join("\n")}
+                manifest.routes[match.route.id].module
+              )};`
+          )
+          .join("\n")}
 window.__remixRouteModules = {${matches
-      .map((match, index) => `${JSON.stringify(match.route.id)}:route${index}`)
-      .join(",")}};
+          .map(
+            (match, index) => `${JSON.stringify(match.route.id)}:route${index}`
+          )
+          .join(",")}};
 
 import(${JSON.stringify(manifest.entry.module)});`;
 
@@ -817,6 +920,12 @@ import(${JSON.stringify(manifest.entry.module)});`;
     // eslint-disable-next-line
   }, []);
 
+  if (!isStatic && typeof __remixContext === "object" && __remixContext.a) {
+    for (let i = 0; i < __remixContext.a; i++) {
+      deferredScripts.push(<DeferredHydrationScript key={i} />);
+    }
+  }
+
   // avoid waterfall when importing the next route module
   let nextMatches = React.useMemo(() => {
     if (navigation.location) {
@@ -862,11 +971,105 @@ import(${JSON.stringify(manifest.entry.module)});`;
           crossOrigin={props.crossOrigin}
         />
       ))}
-      {isHydrated ? null : initialScripts}
+      {!isHydrated && initialScripts}
+      {!isHydrated && deferredScripts}
     </>
   );
 }
 
+function DeferredHydrationScript({
+  dataKey,
+  deferredData,
+  routeId,
+}: {
+  dataKey?: string;
+  deferredData?: DeferredData;
+  routeId?: string;
+}) {
+  if (typeof document === "undefined" && deferredData && dataKey && routeId) {
+    invariant(
+      deferredData.pendingKeys.includes(dataKey),
+      `Deferred data for route ${routeId} with key ${dataKey} was not pending but tried to render a script for it.`
+    );
+  }
+
+  return (
+    <React.Suspense
+      fallback={
+        // This makes absolutely no sense. The server renders null as a fallback,
+        // but when hydrating, we need to render a script tag to avoid a hydration issue.
+        // To reproduce a hydration mismatch, just render null as a fallback.
+        typeof document === "undefined" &&
+        deferredData &&
+        dataKey &&
+        routeId ? null : (
+          <script
+            async
+            suppressHydrationWarning
+            dangerouslySetInnerHTML={{ __html: " " }}
+          />
+        )
+      }
+    >
+      {typeof document === "undefined" && deferredData && dataKey && routeId ? (
+        <Await
+          resolve={deferredData.data[dataKey]}
+          errorElement={
+            <ErrorDeferredHydrationScript dataKey={dataKey} routeId={routeId} />
+          }
+          children={(data) => (
+            <script
+              async
+              suppressHydrationWarning
+              dangerouslySetInnerHTML={{
+                __html: `__remixContext.r(${JSON.stringify(
+                  routeId
+                )}, ${JSON.stringify(dataKey)}, ${escapeHtml(
+                  JSON.stringify(data)
+                )});`,
+              }}
+            />
+          )}
+        />
+      ) : (
+        <script
+          async
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: " " }}
+        />
+      )}
+    </React.Suspense>
+  );
+}
+
+function ErrorDeferredHydrationScript({
+  dataKey,
+  routeId,
+}: {
+  dataKey: string;
+  routeId: string;
+}) {
+  let error = useAsyncError() as Error;
+  let toSerialize: { message: string; stack?: string } = {
+    message: error.message,
+    stack: undefined,
+  };
+  if (process.env.NODE_ENV === "development") {
+    toSerialize.stack = error.stack;
+  }
+
+  return (
+    <script
+      suppressHydrationWarning
+      dangerouslySetInnerHTML={{
+        __html: `__remixContext.r(${JSON.stringify(routeId)}, ${JSON.stringify(
+          dataKey
+        )}, !1, ${escapeHtml(JSON.stringify(toSerialize))});`,
+      }}
+    />
+  );
+}
+
 function dedupe(array: any[]) {
   return [...new Set(array)];
 }
diff --git a/packages/remix-react/data.ts b/packages/remix-react/data.ts
index 397436f405a..8cfafce4021 100644
--- a/packages/remix-react/data.ts
+++ b/packages/remix-react/data.ts
@@ -1,3 +1,4 @@
+import { AbortedDeferredError, UNSAFE_DeferredData as DeferredData } from "@remix-run/router";
 import type { FormMethod as FormMethodRR } from "react-router-dom";
 
 export type AppData = any;
@@ -29,6 +30,13 @@ export function isRedirectResponse(response: any): boolean {
   );
 }
 
+export function isDeferredResponse(response: any): boolean {
+  return (
+    response instanceof Response &&
+    !!response.headers.get("Content-Type")?.match(/text\/remix-deferred/)
+  );
+}
+
 export async function fetchData(
   request: Request,
   routeId: string
@@ -61,3 +69,188 @@ export async function fetchData(
 
   return response;
 }
+
+const DEFERRED_VALUE_PLACEHOLDER_PREFIX = "__deferred_promise:";
+export async function parseDeferredReadableStream(
+  stream: ReadableStream<Uint8Array>
+): Promise<DeferredData> {
+  if (!stream) {
+    throw new Error("parseDeferredReadableStream requires stream argument");
+  }
+
+  let deferredData: Record<string, Promise<unknown>> | undefined;
+  let deferredResolvers: Record<
+    string,
+    { resolve: (data: unknown) => void; reject: (error: unknown) => void }
+  > = {};
+
+  try {
+    let sectionReader = readStreamSections(stream);
+
+    // Read the first section to get the critical data
+    let initialSectionResult = await sectionReader.next();
+    let initialSection = initialSectionResult.value;
+    if (!initialSection) throw new Error("no critical data");
+    let criticalData = JSON.parse(initialSection);
+
+    // Setup deferred data and resolvers for later based on the critical data
+    if (typeof criticalData === "object" && criticalData !== null) {
+      for (let [eventKey, value] of Object.entries(criticalData)) {
+        if (
+          typeof value !== "string" ||
+          !value.startsWith(DEFERRED_VALUE_PLACEHOLDER_PREFIX)
+        ) {
+          continue;
+        }
+
+        deferredData = deferredData || {};
+
+        deferredData[eventKey] = new Promise<any>((resolve, reject) => {
+          deferredResolvers[eventKey] = {
+            resolve: (value: unknown) => {
+              resolve(value);
+              delete deferredResolvers[eventKey];
+            },
+            reject: (error: unknown) => {
+              reject(error);
+              delete deferredResolvers[eventKey];
+            },
+          };
+        });
+      }
+    }
+
+    // Read the rest of the stream and resolve deferred promises
+    (async () => {
+      try {
+        for await (let section of sectionReader) {
+          // Determine event type and data
+          let [event, ...sectionDataStrings] = section.split(":");
+          let sectionDataString = sectionDataStrings.join(":");
+          let data = JSON.parse(sectionDataString);
+
+          if (event === "data") {
+            for (let [key, value] of Object.entries(data)) {
+              if (deferredResolvers[key]) {
+                deferredResolvers[key].resolve(value);
+              }
+            }
+          } else if (event === "error") {
+            for (let [key, value] of Object.entries(data) as Iterable<
+              [string, { message: string; stack?: string }]
+            >) {
+              let err = new Error(value.message);
+              err.stack = value.stack;
+              if (deferredResolvers[key]) {
+                deferredResolvers[key].reject(err);
+              }
+            }
+          }
+        }
+
+        for (let [key, resolver] of Object.entries(deferredResolvers)) {
+          resolver.reject(
+            new AbortedDeferredError(`Deferred ${key} will never resolved`)
+          );
+        }
+      } catch (error) {
+        // Reject any existing deferred promises if something blows up
+        for (let resolver of Object.values(deferredResolvers)) {
+          resolver.reject(error);
+        }
+      }
+    })();
+
+    return new DeferredData({ ...criticalData, ...deferredData });
+  } catch (error) {
+    for (let resolver of Object.values(deferredResolvers)) {
+      resolver.reject(error);
+    }
+
+    throw error;
+  }
+}
+
+async function* readStreamSections(stream: ReadableStream<Uint8Array>) {
+  let reader = stream.getReader();
+
+  let buffer: Uint8Array[] = [];
+  let sections: string[] = [];
+  let closed = false;
+  let encoder = new TextEncoder();
+  let decoder = new TextDecoder();
+
+  let readStreamSection = async () => {
+    if (sections.length > 0) return sections.shift();
+
+    // Read from the stream until we have at least one complete section to process
+    while (!closed && sections.length === 0) {
+      let chunk = await reader.read();
+      if (chunk.done) {
+        closed = true;
+        break;
+      }
+      // Buffer the raw chunks
+      buffer.push(chunk.value);
+
+      try {
+        // Attempt to split off a section from the buffer
+        let bufferedString = decoder.decode(mergeArrays(...buffer));
+        let splitSections = bufferedString.split("\n\n");
+        if (splitSections.length >= 2) {
+          // We have a complete section, so add it to the sections array
+          sections.push(...splitSections.slice(0, -1));
+          // Remove the section from the buffer and store the rest for future processing
+          buffer = [encoder.encode(splitSections.slice(-1).join("\n\n"))];
+        }
+
+        // If we successfully parsed at least one section, break out of reading the stream
+        // to allow upstream processing of the processable sections
+        if (sections.length > 0) {
+          break;
+        }
+      } catch {
+        // If we failed to parse the buffer it was because we failed to decode the stream
+        // because we are missing bytes that we haven't yet received, so continue reading
+        // from the stream until we have a complete section
+        continue;
+      }
+    }
+
+    // If we have a complete section, return it
+    if (sections.length > 0) {
+      return sections.shift();
+    }
+
+    // If we have no complete section, but we have no more chunks to process,
+    // split those sections and clear out the buffer as there is no more data
+    // to process. If this errors, let it bubble up as the stream ended
+    // without valid data
+    if (buffer.length > 0) {
+      let bufferedString = decoder.decode(mergeArrays(...buffer));
+      sections = bufferedString.split("\n\n").filter((s) => s);
+      buffer = [];
+    }
+
+    // Return any remaining sections that have been processed
+    return sections.shift();
+  };
+
+  let section = await readStreamSection();
+  while (section) {
+    yield section;
+    section = await readStreamSection();
+  }
+}
+
+function mergeArrays(...arrays: Uint8Array[]) {
+  let out = new Uint8Array(
+    arrays.reduce((total, arr) => total + arr.length, 0)
+  );
+  let offset = 0;
+  for (let arr of arrays) {
+    out.set(arr, offset);
+    offset += arr.length;
+  }
+  return out;
+}
diff --git a/packages/remix-react/entry.ts b/packages/remix-react/entry.ts
index 77f17b4988b..0ed7354d924 100644
--- a/packages/remix-react/entry.ts
+++ b/packages/remix-react/entry.ts
@@ -9,6 +9,7 @@ export interface RemixContextObject {
   routeModules: RouteModules;
   serverHandoffString?: string;
   future: FutureConfig;
+  abortDelay?: number;
 }
 
 // Additional React-Router information needed at runtime, but not hydrated
diff --git a/packages/remix-react/index.tsx b/packages/remix-react/index.tsx
index 5af30425e82..d30829988e7 100644
--- a/packages/remix-react/index.tsx
+++ b/packages/remix-react/index.tsx
@@ -1,6 +1,7 @@
 export type { RemixBrowserProps } from "./browser";
 export { RemixBrowser } from "./browser";
 export type {
+  AwaitProps,
   FormProps,
   Location,
   NavigateFunction,
@@ -11,8 +12,11 @@ export type {
   SubmitOptions,
 } from "react-router-dom";
 export {
+  Await,
   Form,
   Outlet,
+  useAsyncError,
+  useAsyncValue,
   useBeforeUnload,
   useFormAction,
   useHref,
diff --git a/packages/remix-react/markup.ts b/packages/remix-react/markup.ts
index 421b9a16927..49896900efa 100644
--- a/packages/remix-react/markup.ts
+++ b/packages/remix-react/markup.ts
@@ -1,3 +1,23 @@
+// This escapeHtml utility is based on https://github.com/zertosh/htmlescape
+// License: https://github.com/zertosh/htmlescape/blob/0527ca7156a524d256101bb310a9f970f63078ad/LICENSE
+
+// We've chosen to inline the utility here to reduce the number of npm dependencies we have,
+// slightly decrease the code size compared the original package and make it esm compatible.
+
+const ESCAPE_LOOKUP: { [match: string]: string } = {
+  "&": "\\u0026",
+  ">": "\\u003e",
+  "<": "\\u003c",
+  "\u2028": "\\u2028",
+  "\u2029": "\\u2029",
+};
+
+const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
+
+export function escapeHtml(html: string) {
+  return html.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
+}
+
 export interface SafeHtml {
   __html: string;
 }
diff --git a/packages/remix-react/package.json b/packages/remix-react/package.json
index a0846da782a..03a6ca5ad64 100644
--- a/packages/remix-react/package.json
+++ b/packages/remix-react/package.json
@@ -16,8 +16,8 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "1.2.1",
-    "react-router-dom": "6.6.2",
+    "@remix-run/router": "1.3.0-pre.0",
+    "react-router-dom": "6.6.3-pre.0",
     "use-sync-external-store": "1.2.0"
   },
   "devDependencies": {
diff --git a/packages/remix-react/routes.tsx b/packages/remix-react/routes.tsx
index 15c237a7da3..bc7894d990b 100644
--- a/packages/remix-react/routes.tsx
+++ b/packages/remix-react/routes.tsx
@@ -9,7 +9,13 @@ import { redirect } from "react-router-dom";
 
 import type { RouteModules } from "./routeModules";
 import { loadRouteModule } from "./routeModules";
-import { fetchData, isCatchResponse, isRedirectResponse } from "./data";
+import {
+  fetchData,
+  isCatchResponse,
+  isDeferredResponse,
+  isRedirectResponse,
+  parseDeferredReadableStream,
+} from "./data";
 import { prefetchStyleLinks } from "./links";
 import invariant from "./invariant";
 import { RemixRoute, RemixRouteError } from "./components";
@@ -159,6 +165,10 @@ function createDataFunction(
         throw result;
       }
 
+      if (isDeferredResponse(result) && result.body) {
+        return await parseDeferredReadableStream(result.body);
+      }
+
       return result;
     } finally {
       await routeModulePromise;
diff --git a/packages/remix-react/server.tsx b/packages/remix-react/server.tsx
index 61bc6816c47..8a88d4e9165 100644
--- a/packages/remix-react/server.tsx
+++ b/packages/remix-react/server.tsx
@@ -16,6 +16,7 @@ import { createServerRoutes } from "./routes";
 export interface RemixServerProps {
   context: EntryContext;
   url: string | URL;
+  abortDelay?: number;
 }
 
 /**
@@ -23,7 +24,11 @@ export interface RemixServerProps {
  * `app/entry.server.js`). This component is used to generate the HTML in the
  * response from the server.
  */
-export function RemixServer({ context, url }: RemixServerProps): ReactElement {
+export function RemixServer({
+  context,
+  url,
+  abortDelay,
+}: RemixServerProps): ReactElement {
   if (typeof url === "string") {
     url = new URL(url);
   }
@@ -39,6 +44,7 @@ export function RemixServer({ context, url }: RemixServerProps): ReactElement {
         routeModules,
         serverHandoffString,
         future: context.future,
+        abortDelay,
       }}
     >
       <RemixErrorBoundary
diff --git a/packages/remix-server-runtime/data.ts b/packages/remix-server-runtime/data.ts
index a8fdc22a240..eead955c4ab 100644
--- a/packages/remix-server-runtime/data.ts
+++ b/packages/remix-server-runtime/data.ts
@@ -1,4 +1,10 @@
-import { json, isResponse } from "./responses";
+import {
+  redirect,
+  json,
+  isDeferredData,
+  isResponse,
+  isRedirectStatusCode,
+} from "./responses";
 import type {
   ActionFunction,
   DataFunctionArgs,
@@ -73,6 +79,16 @@ export async function callRouteLoaderRR({
     );
   }
 
+  if (isDeferredData(result)) {
+    if (result.init && isRedirectStatusCode(result.init.status || 200)) {
+      return redirect(
+        new Headers(result.init.headers).get("Location")!,
+        result.init
+      );
+    }
+    return result;
+  }
+
   return isResponse(result) ? result : json(result);
 }
 
diff --git a/packages/remix-server-runtime/index.ts b/packages/remix-server-runtime/index.ts
index dc3d491bab9..300b0e4c406 100644
--- a/packages/remix-server-runtime/index.ts
+++ b/packages/remix-server-runtime/index.ts
@@ -4,7 +4,7 @@ export {
   composeUploadHandlers as unstable_composeUploadHandlers,
   parseMultipartFormData as unstable_parseMultipartFormData,
 } from "./formData";
-export { json, redirect } from "./responses";
+export { defer, json, redirect } from "./responses";
 export { createRequestHandler } from "./server";
 export {
   createSession,
diff --git a/packages/remix-server-runtime/package.json b/packages/remix-server-runtime/package.json
index 3cfb68eac1b..c17210c2183 100644
--- a/packages/remix-server-runtime/package.json
+++ b/packages/remix-server-runtime/package.json
@@ -16,7 +16,7 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "1.2.1",
+    "@remix-run/router": "1.3.0-pre.0",
     "@types/cookie": "^0.4.0",
     "@web3-storage/multipart-parser": "^1.0.0",
     "cookie": "^0.4.1",
diff --git a/packages/remix-server-runtime/responses.ts b/packages/remix-server-runtime/responses.ts
index c27b4ddb0e7..cd5bbed0258 100644
--- a/packages/remix-server-runtime/responses.ts
+++ b/packages/remix-server-runtime/responses.ts
@@ -1,3 +1,16 @@
+import {
+  defer as routerDefer,
+  type UNSAFE_DeferredData as DeferredData,
+  type TrackedPromise,
+} from "@remix-run/router";
+
+import { serializeError } from "./errors";
+
+export type DeferFunction = <Data extends Record<string, unknown>>(
+  data: Data,
+  init?: number | ResponseInit
+) => unknown;
+
 export type JsonFunction = <Data extends unknown>(
   data: Data,
   init?: number | ResponseInit
@@ -32,6 +45,26 @@ export const json: JsonFunction = (data, init = {}) => {
   });
 };
 
+/**
+ * This is a shortcut for creating `application/json` responses. Converts `data`
+ * to JSON and sets the `Content-Type` header.
+ *
+ * @see https://remix.run/api/remix#json
+ */
+export const defer: DeferFunction = (data, init = {}) => {
+  let responseInit = typeof init === "number" ? { status: init } : init;
+
+  let headers = new Headers(responseInit.headers);
+  if (!headers.has("Content-Type")) {
+    headers.set("Content-Type", "application/json; charset=utf-8");
+  }
+
+  return routerDefer(data, {
+    ...responseInit,
+    headers,
+  });
+};
+
 export type RedirectFunction = (
   url: string,
   init?: number | ResponseInit
@@ -60,6 +93,18 @@ export const redirect: RedirectFunction = (url, init = 302) => {
   }) as TypedResponse<never>;
 };
 
+export function isDeferredData(value: any): value is DeferredData {
+  let deferred: DeferredData = value;
+  return (
+    deferred &&
+    typeof deferred === "object" &&
+    typeof deferred.data === "object" &&
+    typeof deferred.subscribe === "function" &&
+    typeof deferred.cancel === "function" &&
+    typeof deferred.resolveData === "function"
+  );
+}
+
 export function isResponse(value: any): value is Response {
   return (
     value != null &&
@@ -71,6 +116,101 @@ export function isResponse(value: any): value is Response {
 }
 
 const redirectStatusCodes = new Set([301, 302, 303, 307, 308]);
+export function isRedirectStatusCode(statusCode: number): boolean {
+  return redirectStatusCodes.has(statusCode);
+}
 export function isRedirectResponse(response: Response): boolean {
-  return redirectStatusCodes.has(response.status);
+  return isRedirectStatusCode(response.status);
+}
+
+function isTrackedPromise(value: any): value is TrackedPromise {
+  return (
+    value != null && typeof value.then === "function" && value._tracked === true
+  );
 }
+
+// TODO: Figure out why ReadableStream types are borked sooooooo badly
+// in this file. Probably related to our TS configurations and configs
+// bleeding into each other.
+const DEFERRED_VALUE_PLACEHOLDER_PREFIX = "__deferred_promise:";
+export function createDeferredReadableStream(
+  deferredData: DeferredData,
+  signal: AbortSignal
+): any {
+  let encoder = new TextEncoder();
+  let stream = new ReadableStream({
+    async start(controller: any) {
+      let criticalData: any = {};
+
+      let preresolvedKeys: string[] = [];
+      for (let [key, value] of Object.entries(deferredData.data)) {
+        if (isTrackedPromise(value)) {
+          criticalData[key] = `${DEFERRED_VALUE_PLACEHOLDER_PREFIX}${key}`;
+          if (
+            typeof value._data !== "undefined" ||
+            typeof value._error !== "undefined"
+          ) {
+            preresolvedKeys.push(key);
+          }
+        } else {
+          criticalData[key] = value;
+        }
+      }
+
+      // Send the critical data
+      controller.enqueue(encoder.encode(JSON.stringify(criticalData) + "\n\n"));
+
+      for (let preresolvedKey of preresolvedKeys) {
+        enqueueTrackedPromise(
+          controller,
+          encoder,
+          preresolvedKey,
+          deferredData.data[preresolvedKey] as TrackedPromise
+        );
+      }
+
+      let unsubscribe = deferredData.subscribe((aborted, settledKey) => {
+        if (settledKey) {
+          enqueueTrackedPromise(
+            controller,
+            encoder,
+            settledKey,
+            deferredData.data[settledKey] as TrackedPromise
+          );
+        }
+      });
+      await deferredData.resolveData(signal);
+      unsubscribe();
+      controller.close();
+    },
+  });
+
+  return stream;
+}
+
+function enqueueTrackedPromise(
+  controller: any,
+  encoder: TextEncoder,
+  settledKey: string,
+  promise: TrackedPromise
+) {
+  if ("_error" in promise) {
+    controller.enqueue(
+      encoder.encode(
+        "error:" +
+          JSON.stringify({
+            [settledKey]: serializeError(promise._error),
+          }) +
+          "\n\n"
+      )
+    );
+  } else {
+    controller.enqueue(
+      encoder.encode(
+        "data:" +
+          JSON.stringify({ [settledKey]: promise._data ?? null }) +
+          "\n\n"
+      )
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/remix-server-runtime/server.ts b/packages/remix-server-runtime/server.ts
index 7c0142760cc..a6f0e6419a6 100644
--- a/packages/remix-server-runtime/server.ts
+++ b/packages/remix-server-runtime/server.ts
@@ -1,5 +1,10 @@
-import type { StaticHandler, StaticHandlerContext } from "@remix-run/router";
+import type {
+  UNSAFE_DeferredData as DeferredData,
+  StaticHandler,
+  StaticHandlerContext,
+} from "@remix-run/router";
 import {
+  UNSAFE_DEFERRED_SYMBOL as DEFERRED_SYMBOL,
   getStaticContextFromError,
   isRouteErrorResponse,
   createStaticHandler,
@@ -16,7 +21,12 @@ import { ServerMode, isServerMode } from "./mode";
 import { matchServerRoutes } from "./routeMatching";
 import type { ServerRouteManifest } from "./routes";
 import { createStaticHandlerDataRoutes, createRoutes } from "./routes";
-import { json, isRedirectResponse, isResponse } from "./responses";
+import {
+  createDeferredReadableStream,
+  json,
+  isRedirectResponse,
+  isResponse,
+} from "./responses";
 import { createServerHandoffString } from "./serverHandoff";
 
 export type RequestHandler = (
@@ -126,6 +136,16 @@ async function handleDataRequestRR(
       });
     }
 
+    if (DEFERRED_SYMBOL in response) {
+      let deferredData = response[DEFERRED_SYMBOL] as DeferredData;
+      let body = createDeferredReadableStream(deferredData, request.signal);
+      let init = deferredData.init || {};
+      let headers = new Headers(init.headers);
+      headers.set("Content-Type", "text/remix-deferred");
+      init.headers = headers;
+      return new Response(body, init);
+    }
+
     return response;
   } catch (error: unknown) {
     if (isResponse(error)) {
diff --git a/packages/remix-server-runtime/serverHandoff.ts b/packages/remix-server-runtime/serverHandoff.ts
index b2a0aef78e4..3d1c1817c5c 100644
--- a/packages/remix-server-runtime/serverHandoff.ts
+++ b/packages/remix-server-runtime/serverHandoff.ts
@@ -14,6 +14,7 @@ type ValidateShape<T, Shape> =
         never
     : never;
 
+// TODO: Remove Promises from serialization
 export function createServerHandoffString<T>(serverHandoff: {
   // Don't allow StaticHandlerContext to be passed in verbatim, since then
   // we'd end up including duplicate info
diff --git a/packages/remix-testing/package.json b/packages/remix-testing/package.json
index a2ee9f43c5d..d34b3f81a8e 100644
--- a/packages/remix-testing/package.json
+++ b/packages/remix-testing/package.json
@@ -18,10 +18,10 @@
   "dependencies": {
     "@remix-run/node": "1.10.0",
     "@remix-run/react": "1.10.0",
-    "@remix-run/router": "1.2.1",
+    "@remix-run/router": "1.3.0-pre.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "6.6.2"
+    "react-router-dom": "6.6.3-pre.0"
   },
   "devDependencies": {
     "@types/node": "^18.11.9",
diff --git a/yarn.lock b/yarn.lock
index 40defc812a5..8ca8d5d05d2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2248,10 +2248,10 @@
     "@changesets/types" "^5.0.0"
     dotenv "^8.1.0"
 
-"@remix-run/router@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz#812edd4104a15a493dda1ccac0b352270d7a188c"
-  integrity sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==
+"@remix-run/router@1.3.0-pre.0":
+  version "1.3.0-pre.0"
+  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0-pre.0.tgz#bdd38f43ced6b4bd29d7b21a88f9927b4fdc52bd"
+  integrity sha512-l4UgdeBJDZcPgdqeiOFjaMsnuz+J8q6q4WCy29RLTemphj5Zi30XY2VOIBoaDUiEGuo7U7WWVirYRhKtmlxp1A==
 
 "@remix-run/web-blob@^3.0.3", "@remix-run/web-blob@^3.0.4":
   version "3.0.4"
@@ -10800,20 +10800,20 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-router-dom@6.6.2:
-  version "6.6.2"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz#bbf1f9b45855b218d22fc2d294b79408a084740a"
-  integrity sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==
+react-router-dom@6.6.3-pre.0:
+  version "6.6.3-pre.0"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.3-pre.0.tgz#228512995715d2b15bed12894e8a49441dad1cc6"
+  integrity sha512-aXLIxzwSWEiw2oUmmZcJtXLV4phjKItc344sl9H+Km0ccRMclYY2Jt/KI68WKaIMwyQXcZaYn5lLmrbLHdlkBg==
   dependencies:
-    "@remix-run/router" "1.2.1"
-    react-router "6.6.2"
+    "@remix-run/router" "1.3.0-pre.0"
+    react-router "6.6.3-pre.0"
 
-react-router@6.6.2:
-  version "6.6.2"
-  resolved "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz#556f7b56cff7fe32c5c02429fef3fcb2ecd08111"
-  integrity sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==
+react-router@6.6.3-pre.0:
+  version "6.6.3-pre.0"
+  resolved "https://registry.npmjs.org/react-router/-/react-router-6.6.3-pre.0.tgz#09f35032e795d00f7a9eb4e7c4b6d30f8fe14fed"
+  integrity sha512-4+Dxi8xZtT6mkpR/U43xlZ062Uf7xG0xFebiWcyrfAead1ewrqbBoMF2gCE5RfRemVEheJZkYA4YFVJPANy6BA==
   dependencies:
-    "@remix-run/router" "1.2.1"
+    "@remix-run/router" "1.3.0-pre.0"
 
 react@^18.2.0:
   version "18.2.0"

From e62492b8b8411124cd5b59ab14909e36e1f0d0b8 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Thu, 12 Jan 2023 12:37:27 -0800
Subject: [PATCH 2/7] feat: added back type inference

---
 packages/remix-cloudflare/index.ts            |   1 +
 packages/remix-node/index.ts                  |   1 +
 .../remix-react/__tests__/hook-types-test.tsx | 149 +++++++++++++++++-
 packages/remix-server-runtime/index.ts        |   1 +
 packages/remix-server-runtime/reexport.ts     |   2 +-
 packages/remix-server-runtime/responses.ts    |  13 +-
 packages/remix-server-runtime/serialize.ts    |  11 +-
 7 files changed, 172 insertions(+), 6 deletions(-)

diff --git a/packages/remix-cloudflare/index.ts b/packages/remix-cloudflare/index.ts
index f17e9c2aac3..9f00786cc33 100644
--- a/packages/remix-cloudflare/index.ts
+++ b/packages/remix-cloudflare/index.ts
@@ -63,6 +63,7 @@ export type {
   SessionIdStorageStrategy,
   SessionStorage,
   SignFunction,
+  TypedDeferredData,
   TypedResponse,
   UnsignFunction,
   UploadHandler,
diff --git a/packages/remix-node/index.ts b/packages/remix-node/index.ts
index de558a97359..73b4711371a 100644
--- a/packages/remix-node/index.ts
+++ b/packages/remix-node/index.ts
@@ -90,6 +90,7 @@ export type {
   SessionIdStorageStrategy,
   SessionStorage,
   SignFunction,
+  TypedDeferredData,
   TypedResponse,
   UnsignFunction,
   UploadHandler,
diff --git a/packages/remix-react/__tests__/hook-types-test.tsx b/packages/remix-react/__tests__/hook-types-test.tsx
index 9c2f6821370..57ef9c3ec02 100644
--- a/packages/remix-react/__tests__/hook-types-test.tsx
+++ b/packages/remix-react/__tests__/hook-types-test.tsx
@@ -1,4 +1,7 @@
-import type { TypedResponse } from "@remix-run/server-runtime";
+import type {
+  TypedDeferredData,
+  TypedResponse,
+} from "@remix-run/server-runtime";
 
 import type { useLoaderData } from "../components";
 
@@ -115,3 +118,147 @@ describe("type serializer", () => {
     isEqual<response, { arg1: string; arg2?: number }>(true);
   });
 });
+
+describe("deferred type serializer", () => {
+  it("supports synchronous loader", () => {
+    type Loader = (
+      args: any
+    ) => TypedDeferredData<{ hello: string; lazy: Promise<string> }>;
+    type response = LoaderData<Loader>;
+    isEqual<response, { hello: string; lazy: Promise<string> }>(true);
+  });
+
+  it("supports asynchronous loader", () => {
+    type Loader = (
+      args: any
+    ) => Promise<TypedDeferredData<{ hello: string; lazy: Promise<string> }>>;
+    type response = LoaderData<Loader>;
+    isEqual<response, { hello: string; lazy: Promise<string> }>(true);
+  });
+
+  it("supports synchronous loader with deferred object result", () => {
+    type Loader = (
+      args: any
+    ) => TypedDeferredData<{ hello: string; lazy: Promise<{ a: number }> }>;
+    type response = LoaderData<Loader>;
+    isEqual<response, { hello: string; lazy: Promise<{ a: number }> }>(true);
+  });
+
+  it("supports asynchronous loader with deferred object result", () => {
+    type Loader = (
+      args: any
+    ) => Promise<
+      TypedDeferredData<{ hello: string; lazy: Promise<{ a: number }> }>
+    >;
+    type response = LoaderData<Loader>;
+    isEqual<response, { hello: string; lazy: Promise<{ a: number }> }>(true);
+  });
+
+  it("converts Date to string", () => {
+    type Loader = (
+      args: any
+    ) => Promise<
+      TypedDeferredData<{ hello: Date; lazy: Promise<{ a: Date }> }>
+    >;
+    type response = LoaderData<Loader>;
+    isEqual<response, { hello: string; lazy: Promise<{ a: string }> }>(true);
+  });
+
+  it("supports custom toJSON", () => {
+    type AppData = { toJSON(): { data: string[] } };
+    type Loader = (
+      args: any
+    ) => Promise<
+      TypedDeferredData<{ hello: AppData; lazy: Promise<{ a: AppData }> }>
+    >;
+    type response = LoaderData<Loader>;
+    isEqual<
+      response,
+      { hello: { data: string[] }; lazy: Promise<{ a: { data: string[] } }> }
+    >(true);
+  });
+
+  it("supports recursion", () => {
+    type AppData = { dob: Date; parent: AppData };
+    type SerializedAppData = { dob: string; parent: SerializedAppData };
+    type Loader = (
+      args: any
+    ) => Promise<TypedDeferredData<{ hello: AppData; lazy: Promise<AppData> }>>;
+    type response = LoaderData<Loader>;
+    isEqual<
+      response,
+      { hello: SerializedAppData; lazy: Promise<SerializedAppData> }
+    >(true);
+  });
+
+  it("supports tuples and arrays", () => {
+    type AppData = { arr: Date[]; tuple: [string, number, Date]; empty: [] };
+    type SerializedAppData = {
+      arr: string[];
+      tuple: [string, number, string];
+      empty: [];
+    };
+    type Loader = (
+      args: any
+    ) => Promise<TypedDeferredData<{ hello: AppData; lazy: Promise<AppData> }>>;
+    type response = LoaderData<Loader>;
+    isEqual<
+      response,
+      { hello: SerializedAppData; lazy: Promise<SerializedAppData> }
+    >(true);
+  });
+
+  it("transforms unserializables to null in arrays", () => {
+    type AppData = [Function, symbol, undefined];
+    type SerializedAppData = [null, null, null];
+    type Loader = (
+      args: any
+    ) => Promise<TypedDeferredData<{ hello: AppData; lazy: Promise<AppData> }>>;
+    type response = LoaderData<Loader>;
+    isEqual<
+      response,
+      { hello: SerializedAppData; lazy: Promise<SerializedAppData> }
+    >(true);
+  });
+
+  it("transforms unserializables to never in objects", () => {
+    type AppData = { arg1: Function; arg2: symbol; arg3: undefined };
+    type Loader = (
+      args: any
+    ) => Promise<TypedDeferredData<{ hello: AppData; lazy: Promise<AppData> }>>;
+    type response = LoaderData<Loader>;
+    isEqual<response, { hello: {}; lazy: Promise<{}> }>(true);
+  });
+
+  it("supports class instances", () => {
+    class Test {
+      arg: string;
+      speak: () => string;
+    }
+    type Loader = (
+      args: any
+    ) => Promise<TypedDeferredData<{ hello: Test; lazy: Promise<Test> }>>;
+    type response = LoaderData<Loader>;
+    isEqual<
+      response,
+      { hello: { arg: string }; lazy: Promise<{ arg: string }> }
+    >(true);
+  });
+
+  it("makes keys optional if the value is undefined", () => {
+    type AppData = {
+      arg1: string;
+      arg2: number | undefined;
+      arg3: undefined;
+    };
+    type SerializedAppData = { arg1: string; arg2?: number };
+    type Loader = (
+      args: any
+    ) => Promise<TypedDeferredData<{ hello: AppData; lazy: Promise<AppData> }>>;
+    type response = LoaderData<Loader>;
+    isEqual<
+      response,
+      { hello: SerializedAppData; lazy: Promise<SerializedAppData> }
+    >(true);
+  });
+});
diff --git a/packages/remix-server-runtime/index.ts b/packages/remix-server-runtime/index.ts
index 300b0e4c406..81bd17898e0 100644
--- a/packages/remix-server-runtime/index.ts
+++ b/packages/remix-server-runtime/index.ts
@@ -71,6 +71,7 @@ export type {
   SessionIdStorageStrategy,
   SessionStorage,
   SignFunction,
+  TypedDeferredData,
   TypedResponse,
   UnsignFunction,
   UploadHandler,
diff --git a/packages/remix-server-runtime/reexport.ts b/packages/remix-server-runtime/reexport.ts
index de82631534c..a8ac033a83a 100644
--- a/packages/remix-server-runtime/reexport.ts
+++ b/packages/remix-server-runtime/reexport.ts
@@ -31,7 +31,7 @@ export type {
   PageLinkDescriptor,
 } from "./links";
 
-export type { TypedResponse } from "./responses";
+export type { TypedDeferredData, TypedResponse } from "./responses";
 
 export type {
   ActionArgs,
diff --git a/packages/remix-server-runtime/responses.ts b/packages/remix-server-runtime/responses.ts
index cd5bbed0258..c510ab327b9 100644
--- a/packages/remix-server-runtime/responses.ts
+++ b/packages/remix-server-runtime/responses.ts
@@ -6,10 +6,17 @@ import {
 
 import { serializeError } from "./errors";
 
+export type TypedDeferredData<Data extends Record<string, unknown>> = Omit<
+  DeferredData,
+  "data"
+> & {
+  data: Data;
+};
+
 export type DeferFunction = <Data extends Record<string, unknown>>(
   data: Data,
   init?: number | ResponseInit
-) => unknown;
+) => TypedDeferredData<Data>;
 
 export type JsonFunction = <Data extends unknown>(
   data: Data,
@@ -62,7 +69,7 @@ export const defer: DeferFunction = (data, init = {}) => {
   return routerDefer(data, {
     ...responseInit,
     headers,
-  });
+  }) as TypedDeferredData<typeof data>;
 };
 
 export type RedirectFunction = (
@@ -213,4 +220,4 @@ function enqueueTrackedPromise(
       )
     );
   }
-}
\ No newline at end of file
+}
diff --git a/packages/remix-server-runtime/serialize.ts b/packages/remix-server-runtime/serialize.ts
index 774354291f8..d11cbeb169e 100644
--- a/packages/remix-server-runtime/serialize.ts
+++ b/packages/remix-server-runtime/serialize.ts
@@ -1,5 +1,5 @@
 import type { AppData } from "./data";
-import type { TypedResponse } from "./responses";
+import type { TypedDeferredData, TypedResponse } from "./responses";
 
 type JsonPrimitive =
   | string
@@ -20,6 +20,7 @@ type IsAny<T> = 0 extends 1 & T ? true : false;
 // prettier-ignore
 type Serialize<T> =
   IsAny<T> extends true ? any :
+  T extends TypedDeferredData<infer U> ? SerializeDeferred<U> :
   T extends JsonPrimitive ? T :
   T extends NonJsonPrimitive ? never :
   T extends { toJSON(): infer U } ? U :
@@ -39,6 +40,14 @@ type SerializeObject<T extends object> = {
   [k in keyof T as T[k] extends NonJsonPrimitive ? never : k]: Serialize<T[k]>;
 };
 
+// prettier-ignore
+type SerializeDeferred<T extends Record<string, unknown>> = {
+  [k in keyof T as T[k] extends Promise<unknown> ? k : T[k] extends NonJsonPrimitive ? never : k]:
+    T[k] extends Promise<infer U>
+    ? Promise<Serialize<U>> extends never ? "wtf" : Promise<Serialize<U>>
+    : Serialize<T[k]>  extends never ? k : Serialize<T[k]>;
+};
+
 /*
  * For an object T, if it has any properties that are a union with `undefined`,
  * make those into optional properties instead.

From d3a06f6e6b7e1afc9b32eb3d9da6f45b250e6d4f Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Thu, 12 Jan 2023 13:07:20 -0800
Subject: [PATCH 3/7] chore: add type inference back to <Await> comp

---
 packages/remix-react/components.tsx | 12 +++++++++++-
 packages/remix-react/index.tsx      |  4 ++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index fb2dc537e5b..ba3671d709c 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -22,7 +22,7 @@ import type {
   SubmitFunction,
 } from "react-router-dom";
 import {
-  Await,
+  Await as AwaitRR,
   Link as RouterLink,
   NavLink as RouterNavLink,
   UNSAFE_DataRouterContext as DataRouterContext,
@@ -740,6 +740,16 @@ export function Meta() {
   return future?.v2_meta ? <V2Meta /> : <V1Meta />;
 }
 
+export interface AwaitProps<Resolve> {
+  children: React.ReactNode | ((value: Awaited<Resolve>) => React.ReactElement);
+  errorElement?: React.ReactNode;
+  resolve: Resolve;
+}
+
+export function Await<Resolve>(props: AwaitProps<Resolve>) {
+  return <AwaitRR {...props} />;
+}
+
 /**
  * Tracks whether Remix has finished hydrating or not, so scripts can be skipped
  * during client-side updates.
diff --git a/packages/remix-react/index.tsx b/packages/remix-react/index.tsx
index d30829988e7..46f998bd189 100644
--- a/packages/remix-react/index.tsx
+++ b/packages/remix-react/index.tsx
@@ -1,7 +1,6 @@
 export type { RemixBrowserProps } from "./browser";
 export { RemixBrowser } from "./browser";
 export type {
-  AwaitProps,
   FormProps,
   Location,
   NavigateFunction,
@@ -12,7 +11,6 @@ export type {
   SubmitOptions,
 } from "react-router-dom";
 export {
-  Await,
   Form,
   Outlet,
   useAsyncError,
@@ -35,12 +33,14 @@ export {
 } from "react-router-dom";
 
 export type {
+  AwaitProps,
   FetcherWithComponents,
   RouteMatch,
   RemixNavLinkProps as NavLinkProps,
   RemixLinkProps as LinkProps,
 } from "./components";
 export {
+  Await,
   Meta,
   Links,
   Scripts,

From 95b936595a6722874afa25e1463874d6c7367364 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Fri, 13 Jan 2023 13:23:58 -0800
Subject: [PATCH 4/7] Create old-cameras-lay.md

---
 .changeset/old-cameras-lay.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 .changeset/old-cameras-lay.md

diff --git a/.changeset/old-cameras-lay.md b/.changeset/old-cameras-lay.md
new file mode 100644
index 00000000000..9c321b36ed7
--- /dev/null
+++ b/.changeset/old-cameras-lay.md
@@ -0,0 +1,22 @@
+---
+"remix": patch
+"@remix-run/cloudflare": patch
+"@remix-run/deno": patch
+"@remix-run/node": patch
+"@remix-run/react": patch
+"@remix-run/serve": patch
+"@remix-run/server-runtime": patch
+"@remix-run/testing": patch
+---
+
+Introduces the `defer()` API from `@remix-run/router` with support for server-rendering and HTTP streaming. This utility allows you to defer values returned from loaders by passing promises instead of resolved values. This has been refered to as "promise over the wire".
+
+Informational Resources:
+- https://gist.github.com/jacob-ebey/9bde9546c1aafaa6bc8c242054b1be26
+- https://github.com/remix-run/remix/blob/main/decisions/0004-streaming-apis.md
+
+Documentation Resources (better docs specific to remix are in the works):
+- https://reactrouter.com/en/main/utils/defer
+- https://reactrouter.com/en/main/components/await
+- https://reactrouter.com/en/main/hooks/use-async-value
+- https://reactrouter.com/en/main/hooks/use-async-error

From 03617e1055573fad3dc329b1d5788c2b5028bee5 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Fri, 13 Jan 2023 13:56:41 -0800
Subject: [PATCH 5/7] - limit exposed DeferredData API

---
 packages/remix-server-runtime/responses.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/remix-server-runtime/responses.ts b/packages/remix-server-runtime/responses.ts
index c510ab327b9..1fb097b229e 100644
--- a/packages/remix-server-runtime/responses.ts
+++ b/packages/remix-server-runtime/responses.ts
@@ -6,9 +6,9 @@ import {
 
 import { serializeError } from "./errors";
 
-export type TypedDeferredData<Data extends Record<string, unknown>> = Omit<
+export type TypedDeferredData<Data extends Record<string, unknown>> = Pick<
   DeferredData,
-  "data"
+  "init"
 > & {
   data: Data;
 };

From 21513ddab2c0d4a26e99066eadb3aeeefc1af14a Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Fri, 13 Jan 2023 14:05:41 -0800
Subject: [PATCH 6/7] - document hydration script - expose missing type from
 deno pkg

---
 packages/remix-deno/index.ts        |  1 +
 packages/remix-react/components.tsx | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/remix-deno/index.ts b/packages/remix-deno/index.ts
index 9f182592cd5..1e5e24779fd 100644
--- a/packages/remix-deno/index.ts
+++ b/packages/remix-deno/index.ts
@@ -64,6 +64,7 @@ export type {
   SessionIdStorageStrategy,
   SessionStorage,
   SignFunction,
+  TypedDeferredData,
   TypedResponse,
   UnsignFunction,
   UploadHandler,
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index ba3671d709c..38aa83badb7 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -795,10 +795,21 @@ export function Scripts(props: ScriptProps) {
       : " ";
 
     let activeDeferreds = staticContext?.activeDeferreds;
+    // This sets up the __remixContext with utility functions used by the
+    // deferred scripts.
+    // - __remixContext.p is a function that takes a resolved value or error and returns a promise.
+    //   This is used for transmitting pre-resolved promises from the server to the client.
+    // - __remixContext.n is a function that takes a routeID and key to returns a promise for later
+    //   resolution by the subsequently streamed chunks.
+    // - __remixContext.r is a function that takes a routeID, key and value or error and resolves
+    //   the promise created by __remixContext.n.
+    // - __remixContext.t is a a map or routeId to keys to an object containing `e` and `r` methods
+    //   to resolve or reject the promise created by __remixContext.n.
+    // - __remixContext.a is the active number of deferred scripts that should be rendered to match
+    //   the SSR tree for hydration on the client.
     contextScript += !activeDeferreds
       ? ""
       : [
-          "// Add dev only comments about what these are used for",
           "__remixContext.p = function(v,e,p,x) {",
           "  if (typeof e !== 'undefined') {",
           "    x=new Error(e.message);",

From 7830b6df5a27bfa1ac44440b494612e508a8195d Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Fri, 13 Jan 2023 15:03:55 -0800
Subject: [PATCH 7/7] chore: bump @remix-run/router to 1.3.0-pre.2 chore: bump
 react-router-dom to 6.7.0-pre.3

---
 packages/remix-react/package.json          |  4 +-
 packages/remix-server-runtime/package.json |  2 +-
 packages/remix-testing/package.json        |  4 +-
 yarn.lock                                  | 91 ++++++++++++++++++----
 4 files changed, 81 insertions(+), 20 deletions(-)

diff --git a/packages/remix-react/package.json b/packages/remix-react/package.json
index c0e9e0ec19d..0612d407643 100644
--- a/packages/remix-react/package.json
+++ b/packages/remix-react/package.json
@@ -16,8 +16,8 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "1.3.0-pre.0",
-    "react-router-dom": "6.6.3-pre.0",
+    "@remix-run/router": "1.3.0-pre.2",
+    "react-router-dom": "6.7.0-pre.3",
     "use-sync-external-store": "1.2.0"
   },
   "devDependencies": {
diff --git a/packages/remix-server-runtime/package.json b/packages/remix-server-runtime/package.json
index c24dc2d79e3..d79d8034c2b 100644
--- a/packages/remix-server-runtime/package.json
+++ b/packages/remix-server-runtime/package.json
@@ -16,7 +16,7 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "1.3.0-pre.0",
+    "@remix-run/router": "1.3.0-pre.2",
     "@types/cookie": "^0.4.0",
     "@web3-storage/multipart-parser": "^1.0.0",
     "cookie": "^0.4.1",
diff --git a/packages/remix-testing/package.json b/packages/remix-testing/package.json
index 6ccb649dc6e..55f7102b014 100644
--- a/packages/remix-testing/package.json
+++ b/packages/remix-testing/package.json
@@ -18,10 +18,10 @@
   "dependencies": {
     "@remix-run/node": "1.10.1",
     "@remix-run/react": "1.10.1",
-    "@remix-run/router": "1.3.0-pre.0",
+    "@remix-run/router": "1.3.0-pre.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "6.6.3-pre.0"
+    "react-router-dom": "6.7.0-pre.3"
   },
   "devDependencies": {
     "@types/node": "^18.11.9",
diff --git a/yarn.lock b/yarn.lock
index 8ca8d5d05d2..9f9b624f585 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2248,10 +2248,71 @@
     "@changesets/types" "^5.0.0"
     dotenv "^8.1.0"
 
-"@remix-run/router@1.3.0-pre.0":
-  version "1.3.0-pre.0"
-  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0-pre.0.tgz#bdd38f43ced6b4bd29d7b21a88f9927b4fdc52bd"
-  integrity sha512-l4UgdeBJDZcPgdqeiOFjaMsnuz+J8q6q4WCy29RLTemphj5Zi30XY2VOIBoaDUiEGuo7U7WWVirYRhKtmlxp1A==
+"@remix-run/dev@1.10.0":
+  version "1.10.0"
+  resolved "https://registry.npmjs.org/@remix-run/dev/-/dev-1.10.0.tgz#3a5b2cb52eee6da1d993538a44a307375bf694df"
+  integrity sha512-WBbxkPSkN1LQx0gdzGT+VBSbQLGiFW/Q7HaAYBxV7Wd7DdByk61GPz9CRb1K9a7eWGJ+FzZeYvRwqYkz7moRgA==
+  dependencies:
+    "@babel/core" "^7.18.6"
+    "@babel/plugin-syntax-jsx" "^7.18.6"
+    "@babel/plugin-syntax-typescript" "^7.20.0"
+    "@babel/preset-env" "^7.18.6"
+    "@babel/preset-typescript" "^7.18.6"
+    "@babel/types" "^7.20.2"
+    "@esbuild-plugins/node-modules-polyfill" "^0.1.4"
+    "@npmcli/package-json" "^2.0.0"
+    "@remix-run/server-runtime" "1.10.0"
+    arg "^5.0.1"
+    cacache "^15.0.5"
+    chalk "^4.1.2"
+    chokidar "^3.5.1"
+    dotenv "^16.0.0"
+    esbuild "0.16.3"
+    execa "5.1.1"
+    exit-hook "2.2.1"
+    express "^4.17.1"
+    fast-glob "3.2.11"
+    fs-extra "^10.0.0"
+    get-port "^5.1.1"
+    gunzip-maybe "^1.4.2"
+    inquirer "^8.2.1"
+    jscodeshift "^0.13.1"
+    jsesc "3.0.2"
+    json5 "^2.2.1"
+    lodash "^4.17.21"
+    lodash.debounce "^4.0.8"
+    minimatch "^3.0.4"
+    node-fetch "^2.6.7"
+    ora "^5.4.1"
+    prettier "2.7.1"
+    pretty-ms "^7.0.1"
+    proxy-agent "^5.0.0"
+    recast "^0.21.5"
+    remark-frontmatter "4.0.1"
+    remark-mdx-frontmatter "^1.0.1"
+    semver "^7.3.7"
+    sort-package-json "^1.55.0"
+    tar-fs "^2.1.1"
+    tsconfig-paths "^4.0.0"
+    ws "^7.4.5"
+    xdm "^2.0.0"
+
+"@remix-run/router@1.3.0-pre.2":
+  version "1.3.0-pre.2"
+  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0-pre.2.tgz#13f8ac419d272558a9d48f6efe40a8909f6ff212"
+  integrity sha512-XWpQkUMfuJy5BPA+fivgJtKPiRu1VC5M3LdrUw6Wb310liR3LUIUmY2b5xP6kpcbpIQOTMgF4NVrdwZ4NRG0lA==
+
+"@remix-run/server-runtime@1.10.0":
+  version "1.10.0"
+  resolved "https://registry.npmjs.org/@remix-run/server-runtime/-/server-runtime-1.10.0.tgz#d498332a8b6f7ee9a2dca5ac987619a1bce8f9e1"
+  integrity sha512-2Hlyv96JI4R3ygsF+zgC7NxfeRO1lqNxH/0GpPniyZIfq3JT4+PmTOgbx7HSsj/jgJzDfCyhwjymGYK84mBMKg==
+  dependencies:
+    "@remix-run/router" "1.3.0-pre.2"
+    "@types/cookie" "^0.4.0"
+    "@web3-storage/multipart-parser" "^1.0.0"
+    cookie "^0.4.1"
+    set-cookie-parser "^2.4.8"
+    source-map "^0.7.3"
 
 "@remix-run/web-blob@^3.0.3", "@remix-run/web-blob@^3.0.4":
   version "3.0.4"
@@ -10800,20 +10861,20 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-router-dom@6.6.3-pre.0:
-  version "6.6.3-pre.0"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.3-pre.0.tgz#228512995715d2b15bed12894e8a49441dad1cc6"
-  integrity sha512-aXLIxzwSWEiw2oUmmZcJtXLV4phjKItc344sl9H+Km0ccRMclYY2Jt/KI68WKaIMwyQXcZaYn5lLmrbLHdlkBg==
+react-router-dom@6.7.0-pre.3:
+  version "6.7.0-pre.3"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0-pre.3.tgz#21c276af8623582751d15b3f0334d8bfe14af450"
+  integrity sha512-f/WTO17U5jKM9KJY+0DEcCggKDn8DAWCFbTUdG6XTUMMcTYFqoWzQM6hez+rvasS1HvK8OQBOX7gQ+htnERjcA==
   dependencies:
-    "@remix-run/router" "1.3.0-pre.0"
-    react-router "6.6.3-pre.0"
+    "@remix-run/router" "1.3.0-pre.2"
+    react-router "6.7.0-pre.3"
 
-react-router@6.6.3-pre.0:
-  version "6.6.3-pre.0"
-  resolved "https://registry.npmjs.org/react-router/-/react-router-6.6.3-pre.0.tgz#09f35032e795d00f7a9eb4e7c4b6d30f8fe14fed"
-  integrity sha512-4+Dxi8xZtT6mkpR/U43xlZ062Uf7xG0xFebiWcyrfAead1ewrqbBoMF2gCE5RfRemVEheJZkYA4YFVJPANy6BA==
+react-router@6.7.0-pre.3:
+  version "6.7.0-pre.3"
+  resolved "https://registry.npmjs.org/react-router/-/react-router-6.7.0-pre.3.tgz#131b816f1bfa0fbe1c2e86c09d3ee803f169de9e"
+  integrity sha512-6Nrovh23eq8ySnr7/CaV4f+jm9Qde6u3w9z4zglXfaVDBRRlO4lUClMOMlvrxr1U+KwqB/qNo4roGyrzJoF6Hg==
   dependencies:
-    "@remix-run/router" "1.3.0-pre.0"
+    "@remix-run/router" "1.3.0-pre.2"
 
 react@^18.2.0:
   version "18.2.0"