defer

This is a shortcut for creating a streaming/deferred response. It assumes you are using utf-8 encoding. From a developer perspective it behaves just like json(), but with the ability to transport promises to your UI components.

  1. import { defer } from "@remix-run/node"; // or cloudflare/deno
  3. export const loader = async () => {
  4.   const aStillRunningPromise = loadSlowDataAsync();
  6.   // So you can write this without awaiting the promise:
  7.   return defer({
  8.     critical: "data",
  9.     slowPromise: aStillRunningPromise,
  10.   });
  11. };

You can also pass a status code and headers:

  1. export const loader = async () => {
  2.   const aStillRunningPromise = loadSlowDataAsync();
  4.   return defer(
  5.     {
  6.       critical: "data",
  7.       slowPromise: aStillRunningPromise,
  8.     },
  9.     {
  10.       status: 418,
  11.       headers: {
  12.         "Cache-Control": "no-store",
  13.       },
  14.     }
  15.   );
  16. };