Remix Middlewares

Middlewares

Every middleware shipped by remix, in canonical stack order (top runs first). The table is the answer to "do I need to install X?" — almost always no, Remix already has it.

The canonical stack

You'll write your own middlewares too — loadDatabase(), loadCurrentTenant(), request-id, error boundary, etc. Those go at the end (after asyncContext, before auth if they enrich the context for auth schemes). See references/custom-middleware.md.

Production stack — copy/paste

import { asyncContext }   from 'remix/async-context-middleware'
import { compression }    from 'remix/compression-middleware'
import { createRouter }   from 'remix/fetch-router'
import { formData }       from 'remix/form-data-middleware'
import { logger }         from 'remix/logger-middleware'
import { methodOverride } from 'remix/method-override-middleware'
import { staticFiles }    from 'remix/static-middleware'
import { session }        from 'remix/session-middleware'
import { csrf }           from 'remix/csrf-middleware'

export function createAppRouter() {
  const middleware = []

  if (process.env.NODE_ENV !== 'production') middleware.push(logger())
  middleware.push(compression())
  middleware.push(staticFiles('./public', { cacheControl: 'public, max-age=3600' }))
  middleware.push(formData({}))
  middleware.push(methodOverride())
  middleware.push(session(sessionCookie, sessionStorage))
  middleware.push(csrf())
  middleware.push(asyncContext())
  middleware.push(loadDatabase())     // your custom middleware
  middleware.push(loadAuth())         // wraps auth({...schemes})

  return createRouter({ middleware })
}

Add cors() first if your API is consumed by browsers at other origins. Add cop() after logger if you want fast tokenless cross-origin rejection in front of csrf().

When NOT to use the canonical stack

• Pure JSON API. Drop staticFiles, formData, methodOverride. Maybe drop csrf (use bearer tokens + cors).
• Serverless edge. Drop compression (your platform's CDN handles it). Drop staticFiles (CDN handles it).
• Webhook endpoint. Skip session, csrf, auth. Validate the sender's signature manually inside the handler.

Cross-cutting tips (deep doc: references/ordering.md)

• logger first — so you log everything including static hits and rejects.
• compression early — once headers are written, can't add Content-Encoding.
• staticFiles before business logic — let /assets/* exit cheap.
• methodOverride after formData — needs the parsed _method field.
• session before auth and csrf — both read from the session.
• asyncContext high enough that downstream middleware can use getContext().

Built-in middlewares that don't belong in the canonical stack

Some middlewares are situational, not always-on:

Writing your own

A middleware is (ctx, next) => Promise<Response>. Set values on the context with ctx.set(Key, value); downstream handlers read with ctx.get(Key). See references/custom-middleware.md for patterns (inject context, short-circuit, post-process headers, error boundary, request-id, etc.).

Further reading

• references/built-ins.md — full options for every shipped middleware
• references/custom-middleware.md — patterns for writing your own
• references/ordering.md — common ordering bugs, what comes before/after what
• Sub-skills with their own deep doc: security, sessions, auth, forms