Astro.url is not returning the same as Astro.request.url nor client side document.URL.

[tight vector]

I have a folder structure like this:

pages
- [lang]
- - index.astro
- index.astro

the [lang] > index.astro looks something like this:

---
import Base from "@layouts/Base.astro";

import { getLangFromUrl, useTranslations } from "@i18n/utils";

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<script>
  const div = document.querySelector(".test");
  if (div) {
    div.textContent = document.URL;
  }
</script>

<Base>
  <main id="main-content">
    <div>Javascript (document.URL)</div>
    <div class="test"></div>

    <br />

    <div>Astro.request.url</div>
    <div>{Astro.request.url}</div>

    <br />

    <div>Astro.url</div>
    <div>{Astro.url}</div>
  </main>
</Base>

The output can be seen on the screenshot.

The root index.astro has the following content:

---
return Astro.redirect("/en");
---

<meta http-equiv="refresh" content="0;url=/en/" />

Basically I just want it to redirect to /en/.

switching to the fo path, I get this

it seems to only happen with my fo and en lang paths. Not if I do something like localhost:3000/blah or localhost:3000/dk