Passing info from server to client in request middleware

[rjmackay]

I want to generate a requestId from the server to the client i.e. so I can include it in logs on both client and server side.
Is this possible with TS Start middleware?

[wesleysmyth]

Yes, you can pass data from server middleware to the client using TanStack Start's middleware context. Here's the pattern:

1. Create the middleware

// app/middleware.ts
import { createMiddleware } from "@tanstack/react-start";
import { nanoid } from "nanoid";

export const requestIdMiddleware = createMiddleware().server(
  async ({ next }) => {
    const requestId = nanoid();
    console.log(`[${requestId}] Request started`);

    const result = await next({ context: { requestId } });

    console.log(`[${requestId}] Request completed`);
    return result;
  }
);

2. Use it in a server function

// app/server/functions.ts
import { createServerFn } from "@tanstack/react-start";
import { requestIdMiddleware } from "../middleware";

export const getRequestContext = createServerFn()
  .middleware([requestIdMiddleware])
  .handler(async ({ context }) => {
    // context.requestId is available here
    return { requestId: context.requestId };
  });

3. Consume it in a route loader

// app/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router";
import { getRequestContext } from "../server/functions";

export const Route = createFileRoute("/")({
  loader: async () => {
    const { requestId } = await getRequestContext();
    return { requestId };
  },
  component: RouteComponent,
});

function RouteComponent() {
  const { requestId } = Route.useLoaderData();
  return <div>Request ID: {requestId}</div>;
}

For logging on both sides

If you want the same request ID available in both server and client logs:

// app/middleware.ts
import { createMiddleware } from "@tanstack/react-start";
import { nanoid } from "nanoid";

export const requestIdMiddleware = createMiddleware().server(
  async ({ next, request }) => {
    // Check for existing request ID from header (e.g., load balancer)
    const requestId =
      request.headers.get("x-request-id") || nanoid();

    // Set response header so client can read it
    const result = await next({
      context: { requestId },
      headers: { "x-request-id": requestId },
    });

    return result;
  }
);

Alternative: Use beforeLoad with a server function

If you don't want to create middleware, you can call a server function directly in beforeLoad:

export const Route = createFileRoute("/")({
  beforeLoad: async () => {
    const ctx = await getRequestContext();
    return { requestId: ctx.requestId };
  },
  component: () => {
    const { requestId } = Route.useRouteContext();
    return <div>{requestId}</div>;
  },
});

The beforeLoad context is available to the route and all its children via useRouteContext().

The key concept: server middleware runs on the server and passes data via context. To get that data to the client, you return it from a loader or beforeLoad — TanStack Start serializes and sends it automatically.