javascript - In this example, am I using NextJS's extension to WebAPI's fetch or the standard WebAPI fetch? - St

admin管理员组

文章数量:1397110

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

Share Improve this question Follow edited Mar 28 at 8:34 Jim asked Mar 26 at 11:44 JimJim 30155 silver badges1212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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.

本文标签：