Defer not working as expected with the most basic example. It awaits all promises before transmitting data. #8132

felixmpaulus · 2023-11-25T17:51:39Z

felixmpaulus
Nov 25, 2023

I have critical data and noncritical data. Both are provided through the loader. I want to transmit the noncritical data as a promise using defer.

Given the following example, I would expect "quickAndCritical" to be rendered after about 1s and "slow" about 2s later.
But actually the page stays blank for about 3s and then renders both.

Am I making a mistake here? I would appreciate any help!

import React, { Suspense } from "react";
import { defer } from "@remix-run/node";
import { Await, Links, Meta, useLoaderData } from "@remix-run/react";
import type { LoaderFunction, LoaderFunctionArgs } from "@remix-run/node";

export function quickAndCritical() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("quickAndCritical");
    }, 1000);
  });
}

export function slowAndDeferrable() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("slow");
    }, 3000);
  });
}

export const loader: LoaderFunction = async ({ request }: LoaderFunctionArgs) => {
  const critical = await quickAndCritical();
  const canBeDeferred = slowAndDeferrable();

  return defer({
    critical,
    canBeDeferred,
  });
};

export default function App() {
  const { critical, canBeDeferred } = useLoaderData();

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {critical}
        <br></br>
        <br></br>
        <Suspense fallback={null}>
          <Await resolve={canBeDeferred}>{(resolvedData) => <div>{resolvedData}</div>}</Await>
        </Suspense>
      </body>
    </html>
  );
}

lili21 · 2023-11-27T09:26:12Z

lili21
Nov 27, 2023

It works as expect.

https://stackblitz.com/edit/remix-run-remix-cxmhxm?file=app%2Froot.tsx

1 reply

felixmpaulus Nov 27, 2023
Author

Thank you. That is the expected behaviour. I read somewhere that cloudflare tunnels break this defer functionality. So I will try to push this into a production environment and see if the issue persists.

kiliman · 2023-11-27T15:04:22Z

kiliman
Nov 27, 2023
Maintainer

You should swap the order of your function calls.

await will pause execution until the promise resolves.

  // deferred promises should be called first so they can start 
  // before you await the other promises
  const canBeDeferred = slowAndDeferrable(); // start promise
  const critical = await quickAndCritical(); // wait until promise resolves

2 replies

felixmpaulus Nov 27, 2023
Author

This does not work. On SO someone said the same: https://stackoverflow.com/a/77549464/8179042.

await will pause execution until the promise resolves.

That's is right, but it should not matter? I await quickAndCritical() anyways, the order is irrelevant. Or am I wrong?

Realyyt Feb 23, 2024

order of await is relevant

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Defer not working as expected with the most basic example. It awaits all promises before transmitting data. #8132

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Defer not working as expected with the most basic example. It awaits all promises before transmitting data. #8132

Uh oh!

felixmpaulus Nov 25, 2023

Replies: 2 comments · 3 replies

Uh oh!

lili21 Nov 27, 2023

Uh oh!

felixmpaulus Nov 27, 2023 Author

Uh oh!

kiliman Nov 27, 2023 Maintainer

Uh oh!

Uh oh!

felixmpaulus Nov 27, 2023 Author

Uh oh!

Realyyt Feb 23, 2024

felixmpaulus
Nov 25, 2023

Replies: 2 comments 3 replies

lili21
Nov 27, 2023

felixmpaulus Nov 27, 2023
Author

kiliman
Nov 27, 2023
Maintainer

felixmpaulus Nov 27, 2023
Author