How to keep fetched data as static variable?
#Data from fetch as static variable
fallen cradle
atomic moatBOT
Hi @fallen cradle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro does not currently support storing fetched data as a static variable that can be shared across all components. According to a closed GitHub issue (https://github.com/withastro/astro/issues/694), the component script in Astro is scoped to each individual component, meaning that any code will run on every render.
However, there was a proposed solution for a feature called Astro.defineOnce(), which would allow expensive code to run once and be shared across all components. This feature would work like this:
// Only runs once, cached and reused across all future instances
const result = Astro.defineOnce(async () => await fetch(...));
Please note that this feature was only proposed and it's not clear from the provided extracts whether it has been implemented yet. For the most accurate and up-to-date information, please refer to the official Astro documentation or their GitHub repository.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
fallen cradle
@atomic moat it seems that Data obtained with Fetch API is stored as static data by default
atomic moatBOT
Let me check the knowledge base for you. One moment! :books:
Yes, you're correct. In Astro, data fetched using the Fetch API is indeed treated as static data. This is because Astro executes the fetch call at build time, and the fetched data is then available to the component template for generating static HTML.
Here's an example from the Astro documentation (https://docs.astro.build/en/guides/data-fetching#fetch-in-astro):
---
import Contact from '../components/Contact.jsx';
import Location from '../components/Location.astro';
const response = await fetch('<https://randomuser.me/api/'>);
const data = await response.json();
const randomUser = data.results[0];
---
<!-- Data fetched at build can be rendered in HTML -->
<h1>User</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>
<!-- Data fetched at build can be passed to components as props -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />
In this example, the data fetched from the API is used to generate static HTML at build time. The fetched data can also be passed to other components as props.