Ability to rewrite as part of middleware logic

[omerman]

What's the motivation for this proposal?

Sometimes the url should include more info, but the actual dir-path would ideally be just an identifier. for example:

We want our url to be informative for SEO reasons.
And have our directory based routing be clear and id driven:

So for example:
https://my.example.articles.com/qwik-is-a-great-platform
---> rewrite ----->
https://my.example.articles.com/7777

What do you think?

Proposed Solution / Feature

What do you propose?

First of all I want you to know that I partially managed to do it, it's just not working great:

export const onRequest: RequestHandler = async (requestEvent) => {
  if (!requestEvent.url.pathname.includes("/track/chords/4983")) {
    console.log("will-rewrite");
    const res = await fetch("http://localhost:5124/track/chords/4983");
    const html = await res.text();
    requestEvent.html(200, html);
  }
};

I performed the above as a test, but if the code uses useLocation() to build any links,it easily breaks, because the router
thinks it's at /track/chords/4983 even-though its not.

Code examples

I was thinking, like redirect, we could have, .rewrite

Ideally My test above would look like this:

export const onRequest: RequestHandler = async (requestEvent) => {
  if (!requestEvent.url.pathname.includes("/track/chords/4983")) {
    console.log("will-rewrite");
    requestEvent.rewrite("/track/chords/4983");
  }
};

---

Links / References

This feature exists in nextjs middlewares, you are able to return Rewrite.
This is something I used to do:

return NextResponse.rewrite(new URL(route, `...`));

[wmertens]

Nice idea, more generally there could be a canonical and a display URL.

Every time the url changes it is passed to a canonicalization function (must work on the client too? Or contact server every time?) , and then to a display function to set the URL in the browser or to redirect the SSR. Routing is done with the canon url.

[omerman]

Thank you for the qwik response :)

FYI -
I had interesting developments trying to hack it with the current capabilities after some research over the codebase, thought it might be useful:

The below almost fully works,
the only thing that fails to work, is that when I try to perform navigate, it does a full reload(instead of client navigation, even when the pathname stays the same and just the search params changes) of the page, I couldn't yet pin down exactly why, because after these changes the useLocation() now outputs the right location(of the url rewrite).

// top layout.tsx

export const onRequest: RequestHandler = async (requestEvent) => {
  if (/*  rewrite condition met */) {
    console.log("will-rewrite");
    const res = await fetch(<original-path>, {
      headers: {
        "x-rewrite-url": <full-url-to-rewrite-to>,
      },
    });
    const html = await res.text();
    requestEvent.html(200, html);
  }
};

// entry.ssr.tsx

export default function (opts: RenderToStreamOptions) {
  if (opts.serverData?.requestHeaders?.["x-rewrite-url"]) {
    opts.serverData.url = opts.serverData.requestHeaders?.["x-rewrite-url"];
    opts.serverData.qwikcity = {
      ...opts.serverData.qwikcity,
      ev: {
        ...opts.serverData.qwikcity.ev,
        url: rewriteURLNoSearch,
      },
    };
  }

  return renderToStream(<Root />, {
    manifest,
    ...opts,
    // Use container attributes to set attributes on the html tag.
    containerAttributes: {
      lang: "he",
      ...opts.containerAttributes,
    },
    serverData: {
      ...opts.serverData,
    },
  });
}

Regarding your suggestion about canonical and display-name URLs - I think there might be an opportunity for even greater flexibility. Rather than specifically adding display-name functionality to routes, what if we had a more general rewrite mechanism that allows rendering any application route under any URL path we choose (agnostically)

Let me know what you think 🙏

[wmertens]

@omerman I don't understand your last comment, can you give an example?

[omerman]

Yes sure,

If I understand your intial comment correctly, you meant something like this:

export const head: DocumentHead = ({ resolveValue }) => {

  return {
    title: `...`,
    displayUrl: "https://example.com/the-actual-url-the-user-sees"
    meta: [..],
  };
};

In a real life use case I have over at my nextjs impl which im trying to fully convert, I have a viewer for some type of content,
which has this url for example:

https://example.com/chords/Wonerwall/Oasis

If the song meets a criteria, I display it in one specific route(rewrite to) /chords/:id
If the song only partially ready, and was asked for by the community,
I rewrite to /addChords/:id

So it would seem ideal to do a more active:
requestEvent.rewrite("/path/to/any/app/route")

rather than configure it as a one-to-one relation like I assumed you suggested(Maybe I got you wrong)

[omerman]

@wmertens To be honest - without this feature I think a lot of devs wont be able to convert 😅
I couldnt make it work in the end, and I also saw on Discord more people needing this feature

I was very close, but still after "tricking" the page to think it's rendered under a different url, it would always do a hard reload once attempting client navigation in app.

Will this feature be planned?