Exploring the caching capabilities of NextJS and Vercel for optimizing simple fetch

Question

Exploring the caching capabilities of NextJS and Vercel for optimizing simple fetch

I have successfully deployed a NextJS (13.2.4) app to Vercel after testing it locally with great results. The issue I am facing is related to a simple fetch request from a component ('use client').

This request is directed towards a route within the /app directory, which in turn contains an API call to a third-party service.

While everything functions as expected on my local environment, the same cannot be said for Vercel. When I execute the fetch request on the deployed app, it initially retrieves the data properly. However, it seems to cache the response thereafter, failing to update with fresh data.

Although it appears to be refreshing the data and making the network call, the process is completed so quickly that no changes are reflected in the data (even though there should be).

Even after trying to include 'cache: "no-store"' in the fetch request, the problem persists.

If further details are required, I am more than willing to provide them.

javascript next.js vercel

Answer 1

Answer №1

After struggling all day, I finally found a solution to the caching issue with Next13 on Vercel and my Google API call.

A helpful answer that guided me in the right direction was provided by Youssouf Oumar:

How to avoid caching in the app directory of Next.js?

To delve deeper into this topic, check out this section in the documentation:

Revalidating Static Data

In production, Next13 tends to cache most fetch calls in the app folder, but adding ""{ cache: 'no-store' }"" to your fetch in the route.js function can prevent caching for plain fetches.

const response = await fetch('/agents', { cache: 'no-store' });

However, this approach didn't work for me since I was using the Google API SDK.

Ultimately, what resolved the issue for me was setting the revalidate variable to 0 in my route.js file.

// app/agents/route.js
import { NextResponse } from 'next/server'
import getAgentInfo from '../../lib/google-sheets/getAgentInfo.js';

export async function GET() {
  const agents = await getAgentInfo();
 
  return NextResponse.json({ agents })
}

export const revalidate = 0;

This simple change eliminated the caching problem in the specific page where I made the fetch, ensuring that I received up-to-date data (phew!).

I hope this information proves useful for you!

Answer 2

After struggling all day, I finally found a solution to the caching issue with Next13 on Vercel and my Google API call.

A helpful answer that guided me in the right direction was provided by Youssouf Oumar:

How to avoid caching in the app directory of Next.js?

To delve deeper into this topic, check out this section in the documentation:

Revalidating Static Data

In production, Next13 tends to cache most fetch calls in the app folder, but adding ""{ cache: 'no-store' }"" to your fetch in the route.js function can prevent caching for plain fetches.

const response = await fetch('/agents', { cache: 'no-store' });

However, this approach didn't work for me since I was using the Google API SDK.

Ultimately, what resolved the issue for me was setting the revalidate variable to 0 in my route.js file.

// app/agents/route.js
import { NextResponse } from 'next/server'
import getAgentInfo from '../../lib/google-sheets/getAgentInfo.js';

export async function GET() {
  const agents = await getAgentInfo();
 
  return NextResponse.json({ agents })
}

export const revalidate = 0;

This simple change eliminated the caching problem in the specific page where I made the fetch, ensuring that I received up-to-date data (phew!).

I hope this information proves useful for you!

Exploring the caching capabilities of NextJS and Vercel for optimizing simple fetch

Answer №1

Similar questions

Real-time filtering in personalized dropdown menu with search input

How can I show the total sum of input values in a React.js input box?

how can JavaScript be used to retrieve an object based on a condition from an array of objects and an ArrayList

Struggling with preloading information in Next.js

Issue with Vue and Firebase data transmission

I want to trigger the opening and closing of an accordion by clicking on an arrow

Tips on effectively organizing information retrieved from an XML file?

The Ajax database browser page refresh feature updates the content without actually refreshing the entire page

What is the best way to ensure that the content container's max-width for a split tier is the same as the width of a full-width tier?

Find similarities between two JavaScript arrays using unique identifiers

How can I create an onclick link within an alert message using JavaScript, even when the alert is not consistently displayed?

Generate a new item using an existing one

Transferring data from AJAX form in JavaScript to PHP function

How can I use VueJS Cli to create a shared variable that is accessible across all pages and can be monitored for changes within a specific page?

Is it possible to create a Single-Page Application using Nextjs?

I encountered an issue where the error "data.map is not a function" occurs whenever I try to execute a React component

Update the display using a button without the need to refresh the entire webpage

Locate the positions of 2 identification numbers within a Mongoose array

Shuffle letters in a word when hovered over, then unscramble them back to their original order

The JSON.stringify() method does not update the object that has been modified by an event