In this example, am I using NextJS's (14.2.24) server-side extension to WebAPI's fetch or the standard WebAPI fetch, specifically relating to the use of the cache property? Am I referring to NextJS's cache or the browser's http cache?

// actions.ts

"use_server"

export const callApi = async (
  endpoint: string,
  method: Method = Method.GET,
  body?: any
) => {
  const url = `${process.env.API_BASE_URL}${process.env.API_LIB}${endpoint}`;
  let token = cookies().get("session")?.value;

  let response = await fetch(url, {
    method: method,
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`,
    },
    body: body && JSON.stringify(body),
    cache: 'no-store'
  })

  // ... continues
}

export async function addEmployeesToGroup(ids: string[]) {
  const add = await api(`/add-employees`, Method.POST, {
    employees: ids,
  });
  // ... continues
  return add;
}

// client component (extract)

export default function AddEmployees() {
  const add = async () => {
    const employeeIds = ["LQqihAWU6Y", "4mhbHp7ps0"]; // for example
    const response = await addEmployeesToGroup(employeeIds);
    // ... continues
  };
  return <button onClick={add}>Add employees</button>;
}

In this example, am I using NextJS's (14.2.24) server-side extension to WebAPI's fetch or the standard WebAPI fetch, specifically relating to the use of the cache property? Am I referring to NextJS's cache or the browser's http cache?

// actions.ts

"use_server"

export const callApi = async (
  endpoint: string,
  method: Method = Method.GET,
  body?: any
) => {
  const url = `${process.env.API_BASE_URL}${process.env.API_LIB}${endpoint}`;
  let token = cookies().get("session")?.value;

  let response = await fetch(url, {
    method: method,
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`,
    },
    body: body && JSON.stringify(body),
    cache: 'no-store'
  })

  // ... continues
}

export async function addEmployeesToGroup(ids: string[]) {
  const add = await api(`/add-employees`, Method.POST, {
    employees: ids,
  });
  // ... continues
  return add;
}

// client component (extract)

export default function AddEmployees() {
  const add = async () => {
    const employeeIds = ["LQqihAWU6Y", "4mhbHp7ps0"]; // for example
    const response = await addEmployeesToGroup(employeeIds);
    // ... continues
  };
  return <button onClick={add}>Add employees</button>;
}

• javascript
• reactjs
• typescript
• caching
• nextjs14

1 Answer 1

In Next.js, the server-side fetch API extends the standard Web API fetch with additional optimizations, including automatic request caching, deduplication, and revalidation. Since your callApi function is inside "use server", it is running on the server, and it will be using Next.js's enhanced fetch.

When you specify cache: 'no-store' in this context, you're referring to Next.js's Data Cache, not the browser's HTTP cache. This setting tells Next.js to fetch the resource from the remote server on every request, bypassing the Next.js Data Cache completely, even if Dynamic APIs are not detected on the route.

In a server-side fetch within Next.js, the cache option indicates how a server-side fetch request will interact with the framework's persistent Data Cache, rather than the browser's HTTP cache.