Caching Data from CMS in Next.js

Let's Speed Things Up with Data Caching in NextJs#

Hey, want to make your pages load faster? One cool trick is to cache your data. If you're using NextJs and a CMS API, you can cut down on the number of times you gotta hit that API. Here's the lowdown on how to do it:

Messing with getStaticProps or getServerSideProps#

So, you wanna grab some data from the CMS API? Cool, you can use getStaticProps or getServerSideProps. Both of these buddies let you snag data from the API and pass it back to your page. Oh, and if you're into storing data for longer, give getServerSideProps a shot.

Giving a caching library a spin#

After you've got your data from the CMS API, you could use a caching library like lru-cache or react-cache to keep that data for a certain amount of time. This will save you from having to fetch data from the API every time a new request hits your page. Wanna tweak the way data's stored? Go ahead and write your own caching library.

Checking if your data's chilling in the cache#

Before you go returning data from getStaticProps or getServerSideProps, you gotta check if your data's already chilling in the cache. If it's there, just return that data instead of bothering the CMS API again. If it's not, then you gotta fetch your data from the CMS API and stash it in the cache.

Storing data in the cache#

So, you've checked and your data isn't in the cache? No biggie, just fetch it from the CMS API and put it in there. Then you can return that data to your page. Wanna keep your data around longer? Pump up the cache's lifetime.

Using lru-cache to cache data on NextJs from CMS API#

Alright, so here's a little example of how to use lru-cache to cache data on NextJs from the CMS API:

import LRUCache from 'lru-cache';

const cache = new LRUCache({
  max: 100,
  maxAge: 1000 * 60 * 60,
});

export async function getStaticProps() {
  const cacheKey = 'dataFromCMS';
  const cachedData = cache.get(cacheKey);

  if (cachedData) {
    return {
      props: {
        dataFromCMS: cachedData,
      },
    };
  }

  const response = await fetch('<https://your-cms-api.com/data>');
  const dataFromCMS = await response.json();

  cache.set(cacheKey, dataFromCMS);

  return {
    props: {
      dataFromCMS,
    },
  };
}

Stashing Stuff with react-cache on NextJs from CMS API#

Hey there, did you know you can use react-cache to cache data on NextJs from your CMS API? It's like a super handy little tool that lets you stash data directly in the React Component. Pretty neat, huh?

Let's dive into an example of how you can use react-cache to keep data on NextJs from a CMS API:

import { unstable_createResource } from 'react-cache';

const fetchData = async () => {
  const res = await fetch('<https://your-cms-api.com/data>');
  const data = await res.json();
  return data;
};

const dataResource = unstable_createResource(fetchData);

export async function getStaticProps() {
  const dataFromCMS = dataResource.read();

  return {
    props: {
      dataFromCMS,
    },
  };
}

Playing Around with Redis for Global Caching in NextJs#

So here's the thing with NextJs - when you flip from one page to another, your cache goes poof! Why, you ask? Well, each page is rendered on its own, not sharing any cache love. That means if you want to cache data across multiple pages in your NextJs application, you're gonna need a global cache solution, like Redis. Redis is this super cool cache system used by heaps of big web applications. With Redis, you can cache data across your entire app and share cache between pages. Pretty neat, huh?