remix defer is malfunctioning by awaiting and blocking responses

[bjruberg]

Have you experienced this bug with the latest version of the template?

yes

Steps to Reproduce

I tried very hard to get remix' defer function working as expected - meaning promises shall not block page generation but are streamed to the client later.

However - using the grunge stack I was not able to make the most simple setup running. Instead I always see the server blocking the HTML response until the promise handed over to defer is resolved. Example page:

import { Await, useLoaderData } from "@remix-run/react";
import { Suspense } from "react";

export async function loader() {
  const load = function () {
    return new Promise((resolve) => {
      setTimeout(() => resolve({ items: [], categories: [] }), 3000);
    });
  };

  return defer({
    conversionChartPromise: load(),
  });
}

export default function Dashboard() {
  const data = useLoaderData<typeof loader>();
  console.log(data.conversionChartPromise);
  return (
    <Suspense fallback={<div>Loading</div>}>
      <Await
        resolve={data.conversionChartPromise}
        errorElement={<p>Error loading package location!</p>}
      >
        {(conversionChart) => {
          console.log(conversionChart);
          return null;
        }}
      </Await>
    </Suspense>
  );
}

Expected Behavior

The page should be rendered immediately - after the promise resolved the data should be streamed to the client.

Actual Behavior

Page generation always blocks for three seconds until promise is resolved. No streaming is happening.

[CameronSima]

I am seeing this issue as well. Have you managed to work around it?

[bjruberg]

Unfortunately not - I had to give up.

[CameronSima]

I posted in the discord channel, apparently it's due to API Gateway not supporting http streaming.

[shamsup]

API gateway doesn't support streaming, and Architect doesn't provide a way to use Lambda through a medium that does support it, like Lambda Function URLs. If you want to use defer, you unfortunately are locked to a different deployment option than architect.