Cache on RSC component
Unanswered
Shiba Inu posted this in #help-forum
Shiba InuOP
Hi guys, I’m somewhat new to Next.js. I have an RSC component that makes a request with ‘cache: no-store’. This component displays a list of records from a database. If I click on one of the records to go to the edit page and then save the edit, when I click ‘go back’ (using the Link component from Next.js), it returns to the list of records without refreshing the data. How can I be sure that everytime the user enters the page the data is reloaded without forcing a full refresh?
This is my RSC component:
import { columns } from "@/components/ui/datatable/columns";
import { DataTable } from "@/components/ui/datatable/data-table";
import { ProjectList } from "@/models/project.schema";
import { cookies } from "next/headers";
export default async function Projects() {
const projects: ProjectList = await fetch(
{
headers: {
Cookie: cookies().toString(),
},
},
).then((res) => res.json());
return (
<div className="w-full p-16 text-sm">
<h1 className="mb-4 text-2xl font-medium">Projects</h1>
{<DataTable data={projects} columns={columns} />}
</div>
);
}
This is my RSC component:
import { columns } from "@/components/ui/datatable/columns";
import { DataTable } from "@/components/ui/datatable/data-table";
import { ProjectList } from "@/models/project.schema";
import { cookies } from "next/headers";
export default async function Projects() {
const projects: ProjectList = await fetch(
${process.env.NEXT_PUBLIC_API_URL}/api/projects,{
headers: {
Cookie: cookies().toString(),
},
},
).then((res) => res.json());
return (
<div className="w-full p-16 text-sm">
<h1 className="mb-4 text-2xl font-medium">Projects</h1>
{<DataTable data={projects} columns={columns} />}
</div>
);
}
4 Replies
@Shiba Inu Hi guys, I’m somewhat new to Next.js. I have an RSC component that makes a request with ‘cache: no-store’. This component displays a list of records from a database. If I click on one of the records to go to the edit page and then save the edit, when I click ‘go back’ (using the Link component from Next.js), it returns to the list of records without refreshing the data. How can I be sure that everytime the user enters the page the data is reloaded without forcing a full refresh?
This is my RSC component:
import { columns } from "@/components/ui/datatable/columns";
import { DataTable } from "@/components/ui/datatable/data-table";
import { ProjectList } from "@/models/project.schema";
import { cookies } from "next/headers";
export default async function Projects() {
const projects: ProjectList = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/projects`,
{
headers: {
Cookie: cookies().toString(),
},
},
).then((res) => res.json());
return (
<div className="w-full p-16 text-sm">
<h1 className="mb-4 text-2xl font-medium">Projects</h1>
{<DataTable data={projects} columns={columns} />}
</div>
);
}
it is because there is a router cache. you could try to use server action to mutate the data and use
revalidatePath or revalidateTag to update the cache, also you could use redirect after the revalidate function if neededShiba InuOP
I'm not using server actions to mutate the data, do I need to use them?
@Shiba Inu I'm not using server actions to mutate the data, do I need to use them?
yes you should use them if you could
otherwise you will have to invalidate the router cache every time after mutation