Skip to content

How to cache data in Next.js globally across all pages at build time

In my Next.js based website had the need to fetch data from an API at build time.

I tried various solutions, nothing worked. Then after lots of research and trial and error, here's what worked.

The solution works both on localhost (development) and on Vercel (production).

This is the scenario: I have the emails of the "members" stored somewhere. It can be a remote database, Airtable, anything.

I only want to download this data once, and then have it available on the website, until I trigger the next build.

This members list is very static. It might change once a day max. If this list changes, I will just programmatically trigger a redeploy on Vercel using their Deploy Hooks.

Here's the plan. We'll create a local cache of the data, in a .members file.

A function in the lib/members.js file will take care of fetching the data and storing it in the cache as JSON when it's first called, and subsequently it will read the data from the cache:

import fs from 'fs'
import path from 'path'

function fetchMembersData() {
  console.log('Fetching members data...')
  return [{ email: '[email protected]' }, { email: '[email protected]' }]
}

const MEMBERS_CACHE_PATH = path.resolve('.members')

export default async function getMembers() {
  let cachedData

  try {
    cachedData = JSON.parse(
      fs.readFileSync(path.join(__dirname, MEMBERS_CACHE_PATH), 'utf8')
    )
  } catch (error) {
    console.log('Member cache not initialized')
  }

  if (!cachedData) {
    const data = fetchMembersData()

    try {
      fs.writeFileSync(
        path.join(__dirname, MEMBERS_CACHE_PATH),
        JSON.stringify(data),
        'utf8'
      )
      console.log('Wrote to members cache')
    } catch (error) {
      console.log('ERROR WRITING MEMBERS CACHE TO FILE')
      console.log(error)
    }

    cachedData = data
  }

  return cachedData
}

Now inside any page we can add

import getMembers from 'lib/members'

and inside getStaticProps():

const members = await getMembers()

Now with this data we can do what we want.

A quick example is to add members to the props object returned by getStaticProps, adding it to the props received by the page component, and we can iterate over it in the page:

{members?.map((member) => {
  return (
    <p key={member.email} className='mt-3'>
      {member.email}
    </p>
  )
})}
→ Download my free Next.js Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about next: