Module Server/Preload Route Assets

Note

Install using bunx shadcn@latest add @remix-utils/preload-route-assets.

Caution

This can potentialy create big Link header and can cause extremely hard to debug issues. Some provider's load balancers have set certain buffer for parsing outgoing response's headers and thanks to preloadRouteAssets you can easily reach that in a medium sized application. Your load balancer can randomly stop responding or start throwing 502 error. To overcome this either don't use preloadRouteAssets, set bigger buffer for processing response headers if you own the loadbalancer or use the experimentalMinChunkSize option in Vite config (this does not solve the issue permanently, only delays it)

The Link header allows responses to push to the browser assets that are needed for the document, this is useful to improve the performance of the application by sending those assets earlier.

Once Early Hints is supported this will also allows you to send the assets even before the document is ready, but for now you can benefit to send assets to preload before the browser parse the HTML.

You can do this with the functions preloadRouteAssets, preloadLinkedAssets and preloadModuleAssets.

All functions follows the same signature:

import {
  preloadRouteAssets,
  preloadLinkedAssets,
  preloadModuleAssets,
} from "remix-utils/preload-route-assets";

// entry.server.tsx
export default function handleRequest(
  request: Request,
  statusCode: number,
  headers: Headers,
  context: EntryContext,
) {
  let markup = renderToString(
    <RemixServer context={context} url={request.url} />,
  );
  headers.set("Content-Type", "text/html");

  preloadRouteAssets(context, headers); // add this line
  // preloadLinkedAssets(context, headers);
  // preloadModuleAssets(context, headers);

  return new Response("<!DOCTYPE html>" + markup, {
    status: statusCode,
    headers: headers,
  });
}

The preloadRouteAssets is a combination of both preloadLinkedAssets and preloadModuleAssets so you can use it to preload all assets for a route, if you use this one you don't need the other two

The preloadLinkedAssets function will preload any link with rel: "preload" added with the Remix's LinkFunction, so you can configure assets to preload in your route and send them in the headers automatically. It will additionally preload any linked stylesheet file (with rel: "stylesheet") even if not preloaded so it will load faster.

The preloadModuleAssets function will preload all the JS files Remix adds to the page when hydrating it, Remix already renders a <link rel="modulepreload"> for each now before the <script type="module"> used to start the application, this will use Link headers to preload those assets.

Author

Sergio Xalambrí

Functions

preloadLinkedAssets
preloadModuleAssets
preloadRouteAssets

Module Server/Preload Route Assets

Author

Functions

Settings

On This Page