Skip to main content

Caching Astro fetch Requests


Introduction #

Caching fetch requests, particularly when developing locally, is a nice addition to your workflow when you're working on your remote data-powered, Astro static site.

One of the packages that I've used in the past with Eleventy, another great SSG, is eleventy-fetch.

eleventy-fetch is a simple package that caches fetch requests based upon a few configuration options. And while the package calls itself a "a plugin for the Eleventy static site generator", there's no reason that it can't be used with other frameworks!

Usage #

npm i @11ty/eleventy-fetch
declare module "@11ty/eleventy-fetch";
import EleventyFetch from "@11ty/eleventy-fetch";

const results: any = await EleventyFetch(``, {
duration: "1h",
type: "json",

A populated Eleventy cache

Conclusion #

Sorry if you were looking for some complex method to cache requests with Astro, but I'm going to tell you that if you're looking to cache your requests to avoid hitting that API too frequently when developing locally, just use eleventy-fetch. Yes, even with Astro! It'll save you some time and headache.