AWS Remix streaming

Tip

This page is best viewed through the site search or through the AI.

Follows the Remix Streaming guide to create an app that streams data.

Uses the defer utility to stream data through the loader function.

app/routes/_index.tsx

return defer({
  spongebob,
  friends: friendsPromise,
});

Then uses the the Suspense and Await components to render the data.

app/routes/_index.tsx

<Suspense fallback={<div>Loading...</div>}>
  <Await resolve={friends}>
    { /* ... */ }
  </Await>
</Suspense>

You should see the friends section load after a 3 second delay.

Note

Safari handles streaming differently than other browsers.

Safari uses a different heuristic to determine when to stream data. You need to render enough initial HTML to trigger streaming. This is typically only a problem for demo apps.

Streaming works out of the box with the Remix component.

sst.config.ts

new sst.aws.Remix("MyWeb");

View the full example.