{"id":7452,"date":"2025-10-24T13:59:02","date_gmt":"2025-10-24T18:59:02","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7452"},"modified":"2025-10-24T13:59:02","modified_gmt":"2025-10-24T18:59:02","slug":"introducing-tanstack-start-middleware","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/introducing-tanstack-start-middleware\/","title":{"rendered":"Introducing TanStack Start Middleware"},"content":{"rendered":"\n

TanStack Start<\/a> is one of the most exciting full-stack web development frameworks I’ve seen. I’ve written about it before.<\/a><\/p>\n\n\n\n

In essence, TanStack Start takes TanStack Router<\/a>, a superb, strongly-typed client-side JavaScript framework, and adds server-side support. This serves two purposes: it gives you a place to execute server-side code, like database access; and it enables server-side rendering, or SSR.<\/p>\n\n\n\n

This post is all about one particular, especially powerful feature of TanStack Start: Middleware<\/strong>. <\/p>\n\n\n\n

The elevator pitch for Middleware is that it allows you to execute code in conjunction with your server-side operations, executing code on both the client and the server, both before and after your underlying server-side action, and even passing data between the client and server.<\/p>\n\n\n\n

This post will be a gentle introduction to Middleware. We’ll build some very<\/em> rudimentary observability for a toy app. Then, in a future post, we’ll really see what Middleware can do when we use it to achieve single-flight mutations.<\/p>\n\n\n\n

Why SSR?<\/h2>\n\n\n\n

SSR will usually improve LCP (Largest Contentful Paint) render performance compared to a client-rendered SPA. With SPAs, the server usually sends down an empty shell of a page. The browser then parses the script files, and fetches your application components. Those components then render and, usually, request some data<\/em>. Only then<\/em> can you render actual content for your user.<\/p>\n\n\n\n

These round trips are neither free nor cheap; SSR allows you to send the initial content down directly, via the initial<\/em> request, which the user can see immediately<\/em>, without needing those extra round trips. See the post above for some deeper details; this post is all about Middleware.<\/p>\n\n\n\n

Prelude: Server Functions<\/h2>\n\n\n\n

Any full-stack web application will need a place to execute code on the server. It could be for a database query, to update data, or to validate a user against your authentication solution. Server functions are the main mechanism TanStack Start provides for this purpose, and are documented here<\/a>. The quick introduction is that you can write code like this:<\/p>\n\n\n

import<\/span> { createServerFn } from<\/span> \"@tanstack\/react-start\"<\/span>;\n\nexport<\/span> const<\/span> getServerTime = createServerFn().handler(async<\/span> () => {\n  await<\/span> new<\/span> Promise<\/span>(resolve<\/span> =><\/span> setTimeout(resolve, 1000<\/span>));\n  return<\/span> new<\/span> Date<\/span>().toISOString();\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Then you can call that function from anywhere<\/em> (client or server), to get a value computed on the server. If you call it from the server, it will just execute the code. If you call that function from the browser, TanStack will handle making a network request to an internal URL containing that server function.<\/p>\n\n\n\n
Getting Started<\/h2>\n\n\n\n
All of my prior posts on TanStack Start and Router used the same contrived Jira clone, and this one will be no different. The repo is here<\/a>, but the underlying code is the same. If you want to follow along, you can npm i<\/code> and then npm run dev<\/code> and then run the relevant portion of the app at http:\/\/localhost:3000\/app\/epics?page=1<\/a>.<\/p>\n\n\n\n
The epics section of this app uses server functions for all data and updates. We have an overview showing:<\/p>\n\n\n\n