StaticRouter skips middleware

[jrmyio]

I'm using React Router as a...

library

Reproduction

I am trying the unstable middleware with a StaticRouter. Middleware is not called as can be seen with the following example:

import ReactDOMServer from 'react-dom/server';
import { createStaticHandler } from 'react-router';

import { createStaticRouter, StaticRouterProvider, type RouteObject } from 'react-router';

declare module 'react-router' {
    interface Future {
        unstable_middleware: true;
    }
}

const routes: RouteObject[] = [
    {
        path: '*',
        element: <div>abc</div>,
        unstable_middleware: [
            async () => {
                // NOT called succesfully
                console.log('inside middleware');
            },
        ],
        loader: async () => {
            // called succesfully
            console.log('inside loader');
            return {};
        },
    },
];

let { query } = createStaticHandler(routes);

const context = await query(new Request('https://localhost'));

if (context instanceof Response) {
    console.log('Response', context);
    throw context;
}

const router = createStaticRouter(routes, context, {
    future: {
        unstable_middleware: true,
    },
});
const app = <StaticRouterProvider context={context} router={router} />;

const html = ReactDOMServer.renderToString(app);

console.log({
    html,
});

Here is the sandbox where you can see the Middleware isnt called for StaticRouter:
https://codesandbox.io/p/sandbox/static-router-middleware-cvj4qh

System Info

n/a

Used Package Manager

npm

Expected Behavior

Middleware should be applied even when using the StaticRouter.

Actual Behavior

Middleware is NOT called when using StaticRouter.

The runMiddlewarePipeline is skipped because unstable_respond does not apply middleware when it is undefined:

react-router/packages/react-router/lib/router/router.ts

Line 3485 in 99551ae

if (respond && matches.some((m) => m.route.unstable_middleware)) {

I tried passing ctx => ctx to unstable_respond but this will throw an error because the result has to be a Response:

react-router/packages/react-router/lib/router/router.ts

Line 3581 in 99551ae

invariant(isResponse(response), "Expected a response in query()");

Temporary work around
Eventually I was able to hack around this issue by:

let { query } = createStaticHandler(routes);

let context = await query(new Request("https://localhost"), {
  requestContext: new Map([
    [ContainerContext, { testMessage: "123" }],
  ]),
  unstable_respond: async (ctx) => {
    const response = new Response();
    (response as any).staticHandlerContext = ctx;

    return response;
  },
});

if (context instanceof Response && "staticHandlerContext" in context) {
  context = context.staticHandlerContext as StaticHandlerContext;
}

[brophdawg11]

This is expected behavior - you need to provide the unstable_respond API to enable middleware in the static handler. This is because middleware on the server bubbles the Response back up the middlewares via the next function - it needs some way at the bottom of the middleware chain to turn a StaticHandlerContext into a Response. That's the purpose of unstable_respond.

Based on your above example, that probably looks something like this:

let { query } = createStaticHandler(routes, { 
  future: { 
    unstable_middleware: true
  } 
});

const response = await query(new Request('https://localhost'), { 
  unstable_respond: renderHtml
});

// This function generates the Response we will bubble up the middlewares
function renderHtml(context: StaticHandlerContext) {
  if (context instanceof Response) {
      return context;  
  }

  const router = createStaticRouter(routes, context, {
    future: {
        unstable_middleware: true,
    },
  });
  const app = <StaticRouterProvider context={context} router={router} />;
  const html = ReactDOMServer.renderToString(app);
  return new Response(html, { 
    headers: { 'Content-Type': 'text/html' }
  });
}

[jrmyio]

I could use some help upgrading the following function to be 7.8.0 compatible:

/**
 * With this function we are creating a function that will return the router context
 * for a particular Request object.
 */
export const createReactContextFactory = (routes: RouteObject[]): ICreateContextFn => {
    /**
     * We are going to get the router context for a particular path.
     */
    let { query } = createStaticHandler(routes);

    return async (requestOrPath, opts) => {
        let request =
            typeof requestOrPath === 'string'
                ? new Request('https://localhost' + requestOrPath)
                : requestOrPath;

        let staticHandlerContext: StaticHandlerContext | Response | undefined = undefined;
        const result = await query(request, {
            ...opts,

            /**
             * When using middleware we must create a response.
             *  https://github.com/remix-run/react-router/issues/13307
             */
            unstable_respond: async (ctx) => {
                if (ctx instanceof Response) {
                    return ctx;
                }
                const response = new Response();
                staticHandlerContext = ctx;
                return response;
            },
        });
        return staticHandlerContext ?? result;
    };
};

Since unstable_respond is no longer here (which received the StaticHandlerContext as the ctx argument), I am a little lossed on how to retrieve the StaticHandlerContext and whether that should involve using unstable_generateMiddlewareResponse. However unstable_generateMiddlewareResponse seems to have a type of

(r: Request, args?: {
    filterMatchesToLoad?: (match: AgnosticDataRouteMatch) => boolean;
}) => Promise<StaticHandlerContext | Response>

Any ideas?

[brophdawg11]

You need to manually call query (which we hand you) in the new version:

        let staticHandlerContext: StaticHandlerContext | Response | undefined = undefined;
        const result = await staticHandler.query(request, {
            ...opts,
            unstable_generateMiddlewareResponse: async (query) => {
                const ctx = await query(request); // 👈 Add this line
                if (ctx instanceof Response) {
                    return ctx;
                }
                // Render your app via <StaticRouterProvider> to a Response that 
                // can be bubbled back up the middleware chain
                return renderApp(ctx)
            },
        });
        return staticHandlerContext ?? result;

The difference is that now you are handed a query function to call - which permits doing stuff after middleware has run but before the handlers are called (needed for RSC server actions).

The const response = new Response(); code you have in hour snippet above sort of makes middleware useless, since you're not giving it an actual response to work with. You're supposed to return the generated HTML response out of both the old unstable_respond, and the new generateMiddlewareResponse functions