Combined Server + Client Middleware

This example demonstrates using both server-side (Hono) and client-side (React Router) middleware on the same route. Each type of middleware runs at different times and can set context values.

Data loaded from: server at 2026-03-09T10:41:25.490Z

🖥️ Server Middleware Info

Request ID:
ba071042-08af-4ee2-b90c-e7599e764cbc
Server Time:
2026-03-09T10:41:25.489Z
User Agent:
Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)

🌐 Client Middleware Info

Not available (SSR or initial load)

📊 Live Context (from component props)

Server context available:Yes
Client context available:No

💡 When Each Middleware Runs

  • Server middleware (Hono): Runs on every HTTP request to the server
  • Client middleware (React Router): Runs during client-side navigation only
  • Initial page load: Only server middleware runs
  • Client navigation: Only client middleware runs

How it works

  1. Create a .ts file with Hono middleware for server-side
  2. Export a middleware array in your .tsx file for client-side
  3. Both can set values on the context object
  4. The loader checks which context values are available to determine the source
  5. Components receive context as a prop for direct access