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

by

Yes, in the app folder, Next.js by default caches all fetched results. If you are using fetch(), you can change this behavior per query, with revalidate or cache option:

fetch('https://...', { next: { revalidate: 10 } });
fetch('https://...', { cache: 'no-store' });

You can also control the behavior with Route Segment Config, again if you are using fetch(), by exporting a fetchCache from a Page, Layout, or Route Handler, or a revalidate:

// layout.js OR page.js OR route.js

export const fetchCache="force-no-store";
// OR
export const revalidate = 0;

Now, if you’re not using fetch() to get data, but something like Axios or an ORM, the doc says:

As a temporary solution, until the caching behavior of third-party queries can be configured, you can use Route Segment Config to customize the cache behavior of the entire segment.

// layout.js OR page.js OR route.js

import prisma from './lib/prisma';
 
export const revalidate = 2; // revalidate every 2s, it can be 0 if you want no caching
 
async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}
 
export default async function Page() {
  const posts = await getPosts();
  // ...
}

For more, you can read Data Fetching.

More Related Contents:

  1. Window is not defined in Next.js React app
  2. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  3. Can’t build React/Next project – found page without a React Component as default export (context api file)
  4. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  5. How to properly set environment variables in Next.js app deployed to Vercel?
  6. First Load JS shared by all is rather heavy in next.js
  7. Warning: Function components cannot be given refs
  8. Error: How to serialize data from getStaticProps : Next.js
  9. Environment variables not working (Next.JS 9.4.4)
  10. Next.js context provider wrapping App component with page specific layout component giving undefined data
  11. I can’t reference an image in Next.js
  12. unable to deploy next js to azure
  13. How to Set port in next.js
  14. What is the best way to have a fallback image in NextJS?
  15. Next.js: Error: React.Children.only expected to receive a single React element child
  16. Custom _app and _document get ignored when moving files to src/pages folder in Next.js
  17. how can I use top level “await” in typescript next.js
  18. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  19. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  20. How to prevent Next.js from instantiating a singleton class/object multiple times?
  21. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  22. How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined
  23. Want to have an event handler for the browser’s back button with next.js
  24. Next.js, getStaticProps not working with component but does with page
  25. Await is a reserved word error inside async function
  26. ReactJS: “Uncaught SyntaxError: Unexpected token
  27. How can I render HTML from another file in a React component?
  28. loading json data from local file into React JS
  29. React + Firestore : Return a variable from a query
  30. How to add “refs” dynamically with react hooks?

Leave a Comment