How to opt out of fetch caching

[bitttttten]

Summary

We use a 3rd party library, think supabase, to fetch some data. Although our page is cached by next's fetch patching, which means it doesn't update when we add new users.

If we add a new user on the frontend and use revalidate('/users-count') then it's fine, although the users are often added into the database in other ways.

Is there a way to opt out or configure the next fetch patch to only cache for 15s or so on this?

Additional information

import { supabase } from "@/supabase-instance"

export default async function Component() {
  const users = await supabase.from("users").select("name, id, thumbnail.url")

  return <p>Total users: {users.data.length}</p>
}

[icyJoseph]

Hi,

You need to specify a custom fetch in the Supabase client. Something like:

import { createClient } from '@supabase/supabase-js'

function fetchWithoutCache(url, options) {
    return fetch(url, {...options, cache: 'no-store' })
}

const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key', {
  global: { fetch: fetchWithoutCache }
})

[Gumaan-Mahar]

To disable the caching mechanism in Next.js, you can set the revalidate key to 0. This will result in data being fetched on every individual request, ensuring real-time updates without caching.

Users Component

import { supabase } from "@/supabase-instance";

export const revalidate = 0

export default async function Component() {
  const { data: users } = await supabase.from("users").select("name, id, thumbnail.url");

  return <p>Total users: {users ? users.length : 0}</p>;
}

Single User Component

import supabase from '../../../utils/supabase';
import { notFound } from 'next/navigation';

export const revalidate = 0;

export async function generateStaticParams() {
  const { data: users } = await supabase.from('users').select('id');

  return users?.map(({ id }) => ({
    id,
  }));
}

export default async function Component({ params: { id } }: { params: { id: string } }) {
  const { data: user } = await supabase.from('users').select().match({ id }).single();

  if (!user) {
    notFound();
  }

  return <p>{user.toString()}</p>;
}

Exporting a revalidate variable from our component allows us to set how frequently we want the data to be refreshed, ensuring it stays current.

This mirrors the functionality of returning a revalidate key from the getStaticProps function within a component located in the pages directory.

For further information: https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components

[jtomaszewski]

Why isn't there a global property in next.config.js that I can alter so that cache: 'no-store' is the default? This requires me to fork third party libraries (which don't rely on next.js at all!) just in order to add a next-specific config to their fetch calls.