Next.js Discord

Discord Forum

Caching using <Link />

Unanswered
Lilac posted this in #help-forum
Open in Discord
LilacOP
Is there a way to disable page caching? I'd like the request to be revalidated every time the user enters the page.

9 Replies

Barbary Lion
yes, you can write export const dynamic=‘force dynamic’ at the top of the page
as long as you don’t cache the data fetching result the data will be revalidated
LilacOP
export const dynamic = "force-dynamic";

import LoadingAlert from "@/components/LoadingAlert";
import { Suspense } from "react";
import { IAMList } from "./components/IAMList";

export default async function UsersAccessPage() {
  return (
    <div>
      <Suspense fallback={<LoadingAlert />}>
        <IAMList />
      </Suspense>
    </div>
  );
}
@Barbary Lion as long as you don’t cache the data fetching result the data will be revalidated
LilacOP
This is my code and my header, even when I add export const dynamic = 'force dynamic' at the top of my page, when I switch between pages, it doesn't trigger suspense again.
import axios from "axios";
import UserCard from "../UserCard";
import styles from "./IAMList.module.css";

async function fetchUsersIAM() {
  const res = await axios.get("http://localhost:8000/SubAccounts");
  console.log(res);
  return res.data;
}

export async function IAMList() {
  const usersIamData = await fetchUsersIAM();

  const renderUsers =
    usersIamData.length > 0 &&
    usersIamData.map((user) => {
      return <UserCard key={user.id} user={user} />;
    });

  return <div className={styles.wrapper}>{renderUsers}</div>;
}
Barbary Lion
export const dynamic = "force-dynamic";

import UserCard from "../UserCard";
import styles from "./IAMList.module.css";

async function fetchUsersIAM() {
  const res = await fetch("http://localhost:8000/SubAccounts", { cache: "no-store" });
  console.log(res);
  const data = await res.json()
  return data;
}

export async function IAMList() {
  const usersIamData = await fetchUsersIAM();

  const renderUsers =
    usersIamData.length > 0 &&
    usersIamData.map((user) => {
      return <UserCard key={user.id} user={user} />;
    });

  return <div className={styles.wrapper}>{renderUsers}</div>;
}
can you try this ?
also prefer not fetching your own api and directly make a call to your database