fetch-static v1.2.0
Fetch Static
fetch-static is a TypeScript package that wraps around the native fetch function. It fetches data during build time, stores the result in the filesystem, and retrieves it from these static files during production. This allows you to avoid unnecessary network requests in production by using cached data, making it ideal for static site generation or build-time data fetching.
Note: This package is a workaround for the inability to use getStaticProps in the Next.js App Router. It enables similar functionality by handling server-side data fetching and caching.
Features
- Cache during build time: Stores fetched data as static files, reducing API calls in production.
- Customizable options: Supports the full range of
fetchoptions, including HTTP methods, headers, and more. - Force refresh: Optionally bypass the cache and force a fresh fetch even in production.
Installation
Install via npm:
npm install fetch-staticUsage
Add Prebuild Script
- In your project's
package.json, add a Environment variable to BUILD time so we can catch it in our fetchStatic call:
"scripts": {
"build": "BUILD_TIME=true && next build"
}Just replace your fetch methods with fetchStatic and they should work normally. adding {forceRefresh: true} to the options will force a re fetch from that endpoint, useful when in development to get fresh data.