RFC - URL Rewriting

[tommerty]

Flexible rewrites similar to NextJS' NextResponse.rewrite which helps many SaaS developers offer multi tenant and dynamic platforms. The goal is to provide developers with a powerful tool to dynamically modify routing behavior based on various conditions, such as hostnames, paths, or custom logic.

As it stands, there's no simple way to include multi-tenancy/ custom domain routing / or conditional path rewrites for those building such applications. And it's been agreed across the board that NextJS have the upper hand on this. By introducing a built-in rewrite mechanism that can be added within middleware, this should break down a lot of walls.

The proposal is for a rewrite option to the TanStack Router/Start configuration. This option would allow developers to define rules for rewriting routes based on various conditions.

A great example would be the Vercel Multi-tenant template they provide. Example

Another reference would be the NextResponse documentation

So, if redirect works like this:

import { redirect } from '@tanstack/react-router'
const route = createRoute({
  // throwing a redirect object
  loader: () => {
    if (!user) {
      throw redirect({
        to: '/login',
      })
    }
  },
})

rewrite could work like this:

import { rewrite } from '@tanstack/react-router'
const route = createRoute({
  loader: () => {
    if (path = /auth) {
      throw rewrite(
new URL(`${path === "/auth" ? "" : path}`, req.url)
      )
    }
  },
})

[dotnize]

Similar RFCs/docs from other frameworks:

Astro

• Reroute API withastro/roadmap#681
• https://docs.astro.build/en/guides/routing/#rewrites

Remix

• [Feature]: middleware before Remix processes request remix-run/remix#2857
• Route Segment Constraints remix-run/remix#7111

SvelteKit

• feat: add reroute hook sveltejs/kit#11537
• https://svelte.dev/docs/kit/hooks#Universal-hooks-reroute

And a pretty nice post that explores the feature in various frameworks:
https://egoist.dev/multi-tenant-web-app-2024

[CanRau]

Rakkas' route guards docs which support rewriting https://rakkasjs.org/guide/route-guards

[jperasmus]

A potentially easier first step to get to a type-safe solution is to go for a config-driven solution, similar to Next.js rewrites. This can be configured in the Vite plugin.

With these rewrites, you can do most of the dynamic rewriting, especially if you make it an async function that is invoked within the loaders lifecycle. Would be great for setting up reverse proxies for ingestion endpoints (Posthog, Sentry, etc)