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 fetch options, 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-static

Usage

Add Prebuild Script

1. 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.