Serverside Astro JS global variable

I have a project on Serverside rendered Astro JS. I 'm try pass variable between .astro files on runtime.

For this I use {...}.ts import/exports to share variable between files.

a.ts

export const data = {
   myVariable: false
}

x.astro

---
import { data } from "../a";

if(data.myVariable === true)
  Astro.rewrite("/404/");
---

<SomeComponents />

y.astro

---
import { data } from "../a";
...
...
if(anyVar.length < 1) data.myVariable = true;

In this case, first run the system works fine. But in later requests, AstroJS was cache data.myVariable to true. It always response 404.

How can I share variables in memory and not cacheable?

---

Reply (@mb21)

Yes, what you say makes a lot of sense. But since I'm a bit new, I may have gotten myself into a bit of a pickle, and I'm struggling in this pickle. So let me give you a little more detail about what I do and want, and rewind the tape. Maybe you can suggest a different path.

I have a file structure like this.

docs/index.astro
docs/[slug].astro
/[lang]/docs/index.astro
/[lang]/docs/[slug].astro

• There are 3 different languages ​​set up in the project. "en" is default.
• Default is haven't a path. "/"
• "Docs" is a collection on /content/docs/test-doc.mdx

To apply localization, I have import docs/[slug].astro into /[lang]/docs/[slug].astro file.

In this case, there are no DOC in current language, I'll response a 404 error page like this;

/docs/[slug].astro

const docs = await getCollection("docs", ({ data }) => {
  return (
    data.get.language === language &&
    data.get.slug === slug &&
    data.get.status === "publish"
  );
});

const doc = docs.find((docs) => {
  return (
    docs.collection === "docs" &&
    docs.slug === slug &&
    docs.data.get.language === language
  );
});

if (!doc) {
  return Astro.rewrite("/404/", 404);
}

If open directly default lang: localhost/docs/none it will works. But I'll try to open different language localhost/de/docs/none, I have get "Headers already sent" error.

Because I try to headers sent after rendering, so I call copy of [slug].astro inside [lang] path. IDK maybe I start wrongs while chose this method but I want, run one file to different paths (And I have default language is not prefixed, in this case I have two different path tree...)

You can see code of /[lang]/docs/[slug].astro here:

---
import Doc from "../docs/[slug].astro";

---

<Doc />

Did you understand me? I use copy of the original file into lang path. But it give me an error (Headers already sent...),

...for this I think, if I set a variable, currently404 = false | true, and check it, lang path. So, it was a bad idea :), I am open to suggestions.

You may have heard the saying "global variables are evil". If not, google it. There are plenty of articles on the internet about it.

Also, as you discovered, this will not work at all as you expected, because the variable state will be shared across requests.

You should either pass a prop to the Astro components, or just use a helper function like getY() to encapsulate the functionality you currently have in y.astro (you don't share what that file does nor how it's included).