Adapters should send 103 Early Hints

[ryanflorence]

For the adapters that support it, we should automatically send 103 Early Hints

• we know remix resources for the page from the manifest
• we know the app resources for the page from route links exports

We can send all of this before we even start calling middleware or loaders, we can send it immediately.

For browsers that support it, that means the browser is downloading client assets in parallel with the server's data fetching in loaders.

[ryanwilsonperkin]

Explored this approach a bit today as an opportunity to teach myself about Remix's internal architecture, my initial impression is that it wouldn't be too difficult to build out an initial version that would play well with Node and be available to other adapters.

When we're about to invoke handleDocumentRequestRR we have access to the matched route (if any), and it's links() as well as the root module's links(). Adapters could pass in an optional callback to the remix-server-runtime to be invoked at this point which would handle the adapter-specific pattern for sending the early hints frame.

I've written up a hacky prototype over at ryanwilsonperkin#1 to play around with and would be happy to be involved in any discussions about supporting this feature.

[alexblack]

It'd be great to see this in Remix, we do this already in express. For us we're using early hints for:

1. Most importantly the CSS, since it blocks FCP
2. We have some custom hints in there, to preconnect to hosts for analytics etc
3. We didn't (yet) include the JS chunks, I worried with 30+ of them per page it'd decrease the chance the CSS was prioritized (and CSS seems most critical)

/*
 * The idea here is to emit "early hints" in the response based on the CSS files or other assets needed by the route
 *
 * Eg for a route with 3 css files we want to emit at the top of the response:
 *
 * HTTP/1.1 103 Early Hints
 * Link: </build/_assets/app-XX4AKNF6.css>; rel=preload; as=style;
 * Link: </build/_assets/react-notion-x-5KGZZXWT.css>; rel=preload; as=style;
 * Link: </build/_assets/prism-coy-3Y5Y6EPU.css>; rel=preload; as=style;
 */
export const remixEarlyHints = (
  req: Request,
  res: Response,
  next: NextFunction
) => {
  // Here we jump through some hoops to be compatible with react-router (copied mostly from remix source)
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const routes = createRoutes(serverBuild.routes as any);
  // Find the routes that match
  const matches = matchServerRoutes(routes, req.path);

  // For those routes, run their links() functions and find their links
  const matchesLinks: LinkDescriptor[] = (matches || []).flatMap((match) => {
    const { links } = match.route.module;
    return links ? links() : [];
  });

  // Filter down to stylesheets and emit css resources
  const cssRsources: Resource[] = matchesLinks.flatMap((link) => {
    if ('href' in link && link.rel === 'stylesheet' && link.href) {
      const resource: Resource = {
        rel: 'preload',
        as: 'style',
        path: link.href,
      };
      return [resource];
    }
    return [];
  });

  earlyHints([...cssRsources, ...PrefetchResources])(req, res, next);
};

[lilouartz]

Where are these functions coming from? matchServerRoutes, createRoutes, etc?

[brophdawg11]

Related: #3200

[lilouartz]

I am not sure if this is right or wrong, but this is how I did it in my Fastify + Remix setup:

import { matchServerRoutes } from '@remix-run/server-runtime/dist/routeMatching';
import { createRoutes } from '@remix-run/server-runtime/dist/routes';

// ...

const serverBuild = (await import('../../build/server')) as ServerBuild;

const routes = createRoutes(serverBuild.routes);

const getLinks = (path: string, maxLinks: number = 10) => {
  const matches = matchServerRoutes(routes, path);

  return (matches || []).flatMap((match) => {
    return [
      ...(serverBuild.assets.routes[match.route.id].css?.map((css) => {
        return `<${css}>; rel=stylesheet; as=style; crossorigin`;
      }) ?? []),
      ...(serverBuild.assets.routes[match.route.id].imports?.map((script) => {
        return `<${script}>; rel=modulepreload; as=script; crossorigin`;
      }) ?? []),
    ].slice(maxLinks);
  });
};

await app.register(async (instance) => {
  instance.removeAllContentTypeParsers();

  // https://github.com/mcansh/remix-fastify/issues/244
  instance.addContentTypeParser('*', (_request, payload, done) => {
    done(null, payload);
  });

  instance.all('*', async (request, reply) => {
    const links = getLinks(request.url);

    reply.header(
      'Link',
      [
        '</fonts/gabarito/Gabarito-VariableFont.ttf>; rel=preload; as=font; type=font/ttf; crossorigin',
        ...links,
      ].join(', '),
    );

[ngbrown]

Based on my experimentation, sending the Link header as a normal header with the requested document is relying on a reverse proxy (e.g. Cloudflare) to have seen that document request before and then remembering that to send a Status 103 Early Hint with a Link header for future client requests. With the Status 103 message, the browser can then start multiple requests for the resources while waiting for the main document and its headers.

For the adaptors and servers without a reverse proxy to support this feature, they would need to be able to send that 103 early hint (on an HTTP/2 or HTTP/3 connection) ahead of the requested document having rendered.

Viewing a NetLog dump file (https://www.chromium.org/for-testers/providing-network-details/) was helpful for me to figure out what was actually going on.

[ngbrown]

An intermediate step could be to send the Link header instead of using the <Scripts /> component for preload, modulepreload and preconnect. Then reverse proxies can pick that up and use them to generate the Status 103 Early Hint response.

Even without a reverse proxy to do the conversion, some browsers can now handle the Link header (since Chrome 103 and all Firefox versions).

Cloudflare doesn't support rel=modulepreload though, so at least need the option to use rel=preload; crossorigin=anonymous instead in the Link header.