Data Fetching

page.js

// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
// This is how deduplication is activated, though it is enabled by default
async function fetchData() {
  const res = await fetch("https://reqres.in/api/users", {
    cache: "force-cache",
  });
  return res.json();
}

// This request should be refetched on every request.
// Similar to `getServerSideProps`.
// Removing deduplication
async function fetchData() {
  const res = await fetch("https://reqres.in/api/users", { cache: "no-store" });
  return res.json();
}

// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
async function fetchData() {
  const res = await fetch("https://reqres.in/api/users", {
    next: { revalidate: 10 },
  });
  return res.json();
}

// This is an async Server Component
export default async function Page() {
  const data = await fetchData();

  return <main>{/* Content */}</main>;
}