Routing at Scale with Nicolas Beaussart-Hatchuel

🎧 New Señors @ Scale Episode

This week, I spoke with Nicolas Beaussart-Hatchuel, staff engineer at Payfit and one of the maintainers of TanStack Router. Nicolas has done some really incredible work recently on micro frontends architecture and router architecture, and he's contributed across open source in places like NX, ESLint, Vite, and Hasura, where he was a principal engineer. His very first usable code was a C program to auto-generate the header pages his French student papers required, and his first frontend work was recreating login pages as phishing practice — never used in production, but a great way to learn.

In this episode, we dig into why TanStack Router exists at all, how it does type-safe URL-as-state routing that he hasn't seen any other router pull off, how Payfit migrated a 300-route, 1.5-million-line codebase off React Router v5 using the strangler pattern, how they collapsed 25 polyrepos and five different micro frontend strategies into one modular monolith (and saved 25 megs of JavaScript doing it), and what actually separates a senior engineer from a staff engineer.

⚙️ Main Takeaways

1. He learned frontend by building phishing pages — for practice

The origin story is wonderfully on-brand for a router maintainer.

• First real code: A C program to generate the header files French students need on their papers, because he didn't know Word macros existed back then.
• First frontend: Recreating the login pages of certain apps to make the whole login flow work end to end. "I could get the session login and password. I never used them in production. It was just a learning purpose. But it was a great way to learn frontend."
• A shared rite of passage: I told him I learned frontend the same way as a kid in internet cafes, copying eBay and Amazon. "I mean a lot of us did."

2. Iframe micro frontends work — the hard part is two-way sync

His first paid job at Red Working, a web radio hosting platform, was an iframe-based AngularJS-to-Angular 2+ micro frontend migration that lasted until the end of the company.

• The communication layer: Iframe micro frontends use post messages to talk between the iframe and the parent, which lets you build a two-way sync.
• The overlay problem: A modal in the legacy app needed an overlay on both the iframe and the main shell — otherwise the gray screen only covered the iframe and you could still navigate the menu and top bar.
• Routing strategy: The new app rendered the shell (menu, top bar, left bar). Any path the new Angular 2 app didn't know about defaulted to rendering the old app inside the iframe at that same path. They migrated page by page — dashboard first, then playlists and music — incrementally, never a big-bang migration.
• Auth: Handled through cookies, so the old app didn't even have to know it was in an iframe.

3. TanStack Router exists because Remix didn't think type safety was important

The origin story of the library itself.

• The spark: "Tanner came to the remix folks like, hey, I want to have type safety to your router... And the response was, well, we don't think type safety is important. So Tanner was like, OK, sure, I'm going to build my own."
• Born from production: A lot of TanStack came from real production use cases at Nozzle, Tanner's old company — an SEO dashboard with complex routing, lots of tables (hence TanStack Table), and a strong URL-as-state need.
• Maintainer reality: Nicolas was careful to share credit — there are around four or five maintainers, only Tanner is paid full-time on TanStack, and the rest contribute through their jobs or personal time.

4. The killer feature: type-safe URL-as-state with recursive nesting

This is what Nicolas says no other router does.

• URL as state first: Before TanStack Router, building URL-as-state meant hacking around QS-style libraries and doing your own toJSON/fromJSON serialization. TanStack Router makes it first-class.
• Recursive type-safe context: If you have a query param at the top level of your app, a leaf route at /users/something still has type-safe access to it. "At your leaf, you have all of the inherited state of everything that is running before you. And so far, I don't know of any router that does this."
• No TypeScript plugin needed: Unlike React Router v7/v8's type safety which relies on a TypeScript plugin auto-generating type-only code, "the beauty of TanStack Router is there is no TypeScript plugin. So it's only just regular type-c code and it works great."
• TanStack Start on top: A thin layer that adds SSR, React Server Components, server-side goodies.

5. TanStack Router is built for heavy client apps

It deliberately occupies a different niche than the server-leaning routers.

• The positioning: "TanStack Router is built for heavy client apps." You can do anything with it — even rebuild Astro-style static output in TanStack Start — but its sweet spot is very complex, heavily client-side apps.
• Core-agnostic: Like most TanStack libs, the routing core is agnostic of rendering. There's a React adapter, a stable Solid adapter, an in-progress Vue one.
• Proof at scale: "For us, for example, at work, we have nearly 300 routes... with a lot of query params, with a lot of things and it just works flawlessly, performant."

6. Migrating Payfit off React Router v5: clean up the mess first

The single longest phase wasn't even the router swap.

• Why migrate: React Router v5 was blocking the upgrade to React 18 — Payfit was still on React 17.
• The mess v5 allowed: Nested routers everywhere, a router inside a router for a side panel, modals with their own memory routers. "I think 40 subrouters spread across the whole code base. It was impossible for an engineer to see where is this route component."
• The hardest part: Flattening all of it into a single router.ts file with routes defined flat and components lazy-loaded. This meant touching features so legacy that "even the teams that owned the feature didn't know how it worked."
• A real horror story: Expense OCR data — multiple megs of extracted receipt data — was stored in router state. Refresh the page and you lost everything and had to redo the OCR.

7. The strangler pattern: migrating incrementally without breaking the app

Payfit doesn't believe in big-bang migrations — with 18–19 engineers and 15–20 PRs merged per day, long feature branches are nearly impossible to merge.

• The pattern: Borrowed from backend migrations. Wrap the old app in a facade, incrementally route to the new app, and at the end remove the facade.
• The facade is the route: A top-level splat (catch-all) route in TanStack Router renders the old React Router app by default. They first migrated routes with no layout or state — /login, /logout.
• The nasty bug: TanStack Router two-way syncs with the URL; React Router only reads the URL when the provider mounts. So when TanStack Router changed the URL, React Router didn't update — "the menu says you're on this page, the URL says you're on this page, but the actual page rendering was not the right one, which is pretty bad for business."
• The fix: They reverse-engineered React Router v5 (which is built on React providers), created their own fake history and fake router on the React Router side that actually read from and wrote to TanStack Router. React Router APIs like navigate and useParams kept working but were powered by TanStack Router underneath.
• The finish: Recreate the whole routing tree in TanStack Router (so every route is type-safe — unknown routes throw a type error), migrate one page at a time, then remove the shim and uninstall React Router. React 18 followed; React 19 is planned, maybe this year.

8. Five different micro frontend strategies in one app

Before any of the routing work, Payfit had to remove micro frontends entirely — and what they found was worse than expected.

• The sprawl: From one monorepo nobody managed, to ~25 repos building a single frontend app, with five different micro frontend approaches: NPM packages (most common), runtime module federation via low-level APIs, module federation with an NPM fallback (loading the module twice), and one that literally loaded a JS file from an S3 path.
• The fallout: Five different versions of React Router, each micro frontend embedding its own router state. Incidents when an NPM release on S3 went out of sync with the app's expected API.
• Map it first: They built a reverse dependency graph from the main monorepo's node_modules and fed it to a React graph library to see what was going on. They discovered secret peer-to-peer dependencies between monorepos that were impossible to update but technically worked.

9. Moving everyone back to one monorepo — the migration tips

The consolidation came with hard-won lessons.

• Visualize before you move: Without the graph, they nearly migrated a library first that was actually imported by another — which would have created a secret divergence. "Order of things is very important."
• Make the destination better than the source: "If the destination is worse than the source, people will never move. So you have to improve the house." Migration was framed as simplification, not just another migration.
• Standardize the toolchain: Moving to one repo meant escaping six different bundlers down to just Vite, and moving from Yarn v1 to Yarn 4 — Yarn v1's broken resolution and messed-up overrides meant it took two weeks just to add Astro + Starlight as a docs dependency.

10. Build the whole app at once — and save 25 megs

Once they no longer needed isolated builds, an experiment paid off.

• The old constraint: Every library was built in isolation because of multiple versions of dependencies. Once that need was gone, they tested building everything at once.
• Timing: Building the main app directly was the same speed — incremental sub-library builds added ~2.5 minutes for no benefit.
• The surprise: "We saved 25 megs of JavaScript by just building the whole app at once because tree shaking was working way better."
• The setup now: A modular monolith — feature-based libraries (expenses, absences, pay slips) with clear ownership, one Vite build producing one final asset, released as a single increment. Work the whole app with vite dev, or work a library in isolation with Storybook.

11. AI works better with the code than with an MCP

Counterintuitive findings from rolling out AI tooling on the monorepo.

• The MCP letdown: Despite heavy requests to "please make an MCP," Storybook's native MCP performed worse than just letting the agent read the code — it cost about 20% more tokens because it would read "button," not find it, dump all the docs, then search for "button-default" (the story name, not the component name).
• Skills, same story: Tested skills were as good as no skill, because the agent can already look directly at all the components and Storybook docs and figure it out.
• TS Go, carefully: They use the Go-based TypeScript in editors (as an LSP in WebStorm since last August) but not yet on the codebase itself — it consumes five to six gigs of RAM and they need to fine-tune worker and parallel-validation parameters first.

12. Senior to staff: system design and cross-cutting problems

His answer for what to work on to level up.

• System design matters more now: "Especially now even more at the edge of AI... with the right system design, AI can be better and the production can be better than with the worst one."
• Go cross-cutting: "A senior engineer is mostly focused on their day-to-day team, whereas a staff will look at cross problems that could affect multiple teams and see how he could solve them globally instead of locally."
• Find problems worth solving: "At the staff you find problems that are worth solving... you figure out what needs to be done, you justify the cases, and then you do it" — instead of being handed a destination.

🧠 What I Learned

• TanStack Router was born because Remix told Tanner type safety wasn't important — so he built his own.
• Its standout feature is type-safe URL-as-state with recursive context: a leaf route inherits every parent's typed state, and there's no TypeScript plugin involved.
• TanStack Router is deliberately built for heavy client apps; the core is rendering-agnostic with React, Solid, and an in-progress Vue adapter.
• The strangler pattern — a backend migration technique — works beautifully on the frontend: wrap the old app in a facade, route incrementally, then remove the facade.
• The killer compatibility bug in mixed-router migrations is sync direction: TanStack Router two-way syncs the URL, React Router only reads on mount. Payfit fixed it by shimming a fake history/router on the React Router side that read from TanStack Router.
• Iframe micro frontends communicate via post messages; the genuinely hard part is two-way sync and rendering overlays on both the shell and the iframe.
• Storing multiple megs of OCR data in router state means a page refresh wipes it — don't do that.
• Five different micro frontend strategies in one app (NPM, runtime module federation, federation-with-NPM-fallback, raw S3 JS loading) is a real thing that happens at hyperscale.
• Before any big migration, build a dependency graph and see the system — you'll find secret peer dependencies you'd otherwise break.
• If the destination is worse than the source, nobody migrates — improve the house as part of the move.
• Building a monorepo all at once instead of per-library can shrink the bundle dramatically (25 megs here) thanks to better tree shaking.
• An AI agent reading your code directly can beat a dedicated MCP — the MCP cost ~20% more tokens at Payfit.
• Staff vs senior is system design and cross-cutting scope: finding problems worth solving, not just executing a chosen solution.

💬 Favorite Quotes

"I could get the session login and password. I never used them in production. It was just a learning purpose. But it was a great way to learn frontend."

"Tanner came to the remix folks like, hey, I want to have type safety to your router. And I want to help you get it better. And the response was, well, we don't think type safety is important. So Tanner was like, OK, sure, I'm going to build my own. And this is how TanStack Router came."

"At your leaf, you have all of the inherited state of everything that is running before you. And so far, I don't know of any router that does this."

"The menu says you're on this page, the URL says you're on this page, but the actual page rendering was not the right one, which is pretty bad for business."

"If the destination is worse than the source, people will never move. So you have to improve the system, the house."

"A senior engineer is mostly focused on their day-to-day office team, whereas a staff will look at cross problems that could affect multiple teams and see how he could solve them globally instead of locally."

🎯 Also in this Episode

• The phishing-as-training origin story and the shared "I learned frontend copying eBay in internet cafes" moment
• The open source phishing-attack reality — Nicolas was invited by the same fake company that hit the Axios maintainer (a fake Slack), and trusted his gut to refuse; the running joke that "you have to ask them to say Kim Jong-un is fat" to prove an AI isn't on the call
• Why TanStack Router supports both file-based and code-based routing, plus "virtual routes," and how Payfit's hybrid keeps router state in one file while features export their own lazy route components
• The pain of maintaining a big open source project: spam and abusive issues, and a new policy that issues without a real production use case get closed
• Parallel routes as the next big TanStack Router feature — true type-safe parallel navigation with search-param isolation between a side panel and the main app, with an RFC open on the issues
• TanStack Start nearing v1, with big companies adopting it (names undisclosed) and "the feedback has been amazing every time"
• Dan's own affection for Astro alongside trying Start
• How Nicolas relaxes: coding as his escape hatch ("the do-nothing hook"), two kids (3 and 13), video games, and getting back into World of Warcraft because the new expansion is friendlier to solo players
• Three book/newsletter recommendations: Engineering Management for the Rest of Us by Sarah Drasner, Scaling Fast by Swizec, and Swizec's newsletter

Resources

More from Nicolas & TanStack:

• TanStack Router — Type-safe, URL-as-state routing for heavy client apps
• TanStack Start — The thin server-side layer on top of TanStack Router (SSR, RSC)
• TanStack — The broader TanStack ecosystem (Router, Table, Query, and more)
• Storybook MCP — Storybook's native MCP plugin (mentioned as performing worse than letting the agent read the code)
• Strangler pattern — the incremental migration technique borrowed from backend work

Books & newsletters mentioned:

• Engineering Management for the Rest of Us by Sarah Drasner
• Scaling Fast by Swizec
• Swizec's newsletter — swizec.com

🎧 Listen Now

🎧 Spotify
📺 YouTube
🍏 Apple Podcasts

Episode Length: 54 minutes on TanStack Router, type-safe URL-as-state routing, the strangler pattern, migrating off React Router v5, killing five micro frontend strategies, and going from senior to staff.

Whether you're staring down a router migration on a giant legacy codebase, untangling micro frontends, or trying to figure out what staff-level engineering actually looks like, this conversation has something immediately actionable.

Happy routing,
Dan