Module Middleware/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 { createServerTimingMiddleware } from "remix-utils/middleware/server-timing";

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

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

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

export const middleware: Route.MiddlewareFunction[] = [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 }: Route.LoaderArgs) {
	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.