React Cache API which is right now in canary version, but going to introduce in React 19 mostly likely. It's help to cache the result of a data fetch or computation. But we can only use cache API in React Server Components. Since next.js already support React Server Components, so we can use it in next.js.

Unlike React Query, React cache API is not a library, it's a built-in feature of React. It's a low-level API that allows you to cache the result of a data fetch or computation. It's not a replacement for React Query as It's only work with React Server Components.

It's also very different from other React useMemo or useCallback hooks. It's not a hook, it's a API that you can call anywhere in your server component. It's also not a replacement for useMemo or useCallback hooks.

Key Features of React Cache API

• cache only can use with React Server Components.
• React will invalidate the cache for all memoized functions for each server request.
• It can cache all type of data, like if here cache(fn) in fn return error, then it will cache the error as well.

Usage of Cache API#

import { getPost } from '@/api/api';
import { cache } from 'react';
 
const getSinglePost = cache(getPost);
 
const HomePage = async () => {
  const post = await getSinglePost(1);
 
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};
 
export default HomePage;

In the above example, we are using cache API to cache the result of getPost function. So, when we call getSinglePost function, it will return the cached result if it's already cached.

How to efficiently use Cache API#

There are few things that you should keep in mind while using cache function. Always consider to keep cache function in a separate file, so that you can import it anywhere and use same cache all over the places.

/// This is wrong way to use cache API
 
const HomePage = async () => {
  const getSinglePost = cache(getPost);
  const post = await getSinglePost(1);
 
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};
 
export default HomePage;
 
 
/// This is the right way to use cache API
 
// /post.js
import {cache} from 'react';
import { getPost } from "@/api/api";
 
export default cache(getPost);

In the above example, we are using cache in a separate file, so that we can import it anywhere and use so the all places will use the same cache.

Nginx as Reverse Proxy for Kubernetes Services

Nginx is a popular open-source web server and reverse proxy server. We can use Nginx as a reverse proxy for Kubernetes services.

Read Full Post

Preload data with Cache API#

The best part of cache is that you can preload the data as well. You can use cache to preload the data. This is helpful when you want to preload the data before the component is rendered.

For example we want only fetch user posts when user data fetched, so we can use cache to preload the user posts.

import { cache } from 'react';
import { getUserPosts, getUser } from '@/api/api';
 
const User = async ({ id }) => {
  // Preload the user posts
  getUserPosts(id);
  const user = await getUser(id);
 
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <Posts userId={id} />
    </div>
  );
};
 
const Posts = async ({ userId }) => {
  const posts = await getUserPosts(userId);
 
  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h1>{post.title}</h1>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

In the above example, we are using cache to preload the user posts. So, when the User component is rendered, the user posts will be already fetched.

This help to improve the performance of the application, as the user posts will be already fetched before the component is rendered.

Conclusion#

cache API is useful when we want to memoize work that can be shared across React Server Components. So that we can improve the performance of the application by caching the result or we can preload the data before the component is rendered.

I hope you find this article helpful. If you have any question, feel free to ask in the comment section below. Happy coding!