Module Middleware/Server Timing

This depends on @edgefirst-dev/server-timing. The server timing middleware let's you add a Server-Timing header to the response with the time it took to run the loaders and actions.

import { unstable_createServerTimingMiddleware } from "remix-utils/middleware/server-timing";

export const [serverTimingMiddleware, getTimingCollector] =
  unstable_createServerTimingMiddleware();
Copy

To use it, you need to add it to the unstable_middleware array in your app/root.tsx file.

import { serverTimingMiddleware } from "~/middleware/server-timing.server";

export const unstable_middleware = [serverTimingMiddleware];
Copy

And you can use the getTimingCollector function in your loaders and actions to add timings to the response.

import { getTimingCollector } from "~/middleware/server-timing.server";

export async function loader({ request }: LoaderFunctionArgs) {
  let collector = getTimingCollector();
  return await collector.measure("name", "optional description", async () => {
    return await getData();
  });
}
Copy

The measure function will measure the time it took to run the function passed as the last argument and add it to the Server-Timing header.