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)

[devrayat000]

Follow-up question:

• Deploying to Vercel should allow you to configure rewrites using the vercel.json file; however, for some reason, it is not working. Defining sub-domain rewrites doesn't rewrite the path, instead it adds a host search parameter with the subdomain value.
• Using nitro.config.ts proxy let's you implement rewrites in ssr, but as soon as hydration occurs, the it rerenders the previous page.

[Nthalk]

I really would appreciate an interceptor that takes a path and returns a path on the Router.

This way, I can detect things like subdoamins that are replacements for routes, keeping my routes singular, but allowing for subdomain routing as well as path routing. I.E. (/list on subdomain.domain.tld) => d/subdomain/list

Seems simple but pervasive, but there's no obvious place to hook this in currently.

[Nthalk]

Shouldn't the link resolution just run the rewrite rule again? I mean, if we have link -> link, it shouldn't need inputs/outputs. It could be runnable to discern where a link resolves to.

The underlying routing mechanism should just see the effective route, but the rewrite should happen at the resolution and link->route phase.

[schiller-manuel]

@Nthalk what do you mean by "link -> link" ?

[Nthalk]

If you you are given an initial href, and you take your domain and produce another href, the underlying routing system doesn't need to understand the domain relationship.

When you click a link, the link still points to the original href (without rewriting) but before it gets applied to the Browser/HashRouter, it does the rewrite again.

[schiller-manuel]

this might work for some limited use cases but not in terms of a fully flexible rewrite system.

[Nthalk]

I'm curious what case this wouldn't work?