Revalidate not working on Server Component
Answered
Alligator mississippiensis posted this in #help-forum
Alligator mississippiensisOP
Hello, I'm trying to add revalidate to my component but its not working, can anyone tell me why?
this is how its being called:
import { endpoints } from "@/endpoints/endpoints";
export default async function FetchOrdersId({ userEmail, setOrdersId, setIdsGrabbed }: any) {
const grabOrders = await fetch(endpoints.url + endpoints.grabOrdersId(userEmail), {
method: "GET",
headers: {
"Content-Type": "application/json"
},
next: {
revalidate: 120
}
});
const ordersData = await grabOrders.json();
setIdsGrabbed(true);
setOrdersId(ordersData);
}this is how its being called:
useEffect(() => {
if (jwtToken && !idsGrabbed) {
FetchOrdersId({ userEmail, setOrdersId, setIdsGrabbed });
}Answered by Ray
like this
export default async function Home() {
const data = await fetch("", { next: { revalidate: 120 } }).then((res) =>
res.json()
);
return (
<main>
<Client data={data} />
</main>
);
}17 Replies
@Alligator mississippiensis Hello, I'm trying to add revalidate to my component but its not working, can anyone tell me why?
cs
import { endpoints } from "@/endpoints/endpoints";
export default async function FetchOrdersId({ userEmail, setOrdersId, setIdsGrabbed }: any) {
const grabOrders = await fetch(endpoints.url + endpoints.grabOrdersId(userEmail), {
method: "GET",
headers: {
"Content-Type": "application/json"
},
next: {
revalidate: 120
}
});
const ordersData = await grabOrders.json();
setIdsGrabbed(true);
setOrdersId(ordersData);
}
this is how its being called:
cs
useEffect(() => {
if (jwtToken && !idsGrabbed) {
FetchOrdersId({ userEmail, setOrdersId, setIdsGrabbed });
}
fetch("", { next: { revalidate: 120 } } only work when you are fetching on server@Ray `fetch("", { next: { revalidate: 120 } }` only work when you are fetching on server
Alligator mississippiensisOP
how can i make it work with server component?
@Alligator mississippiensis how can i make it work with server component?
remove 'use client' and all the hook
fetch it in the page component and pass the data down to client component if you need state
@Ray fetch it in the page component and pass the data down to client component if you need state
Alligator mississippiensisOP
so i make this fetch directly in the page, still creating a new async function there?
@Alligator mississippiensis so i make this fetch directly in the page, still creating a new async function there?
its up to you, you could just use fetch function in the page component if you doesn't need to use the cache function from react for request deduplication
Alligator mississippiensisOP
but the page.tsx still needs "use client" for the states, wont that be a problem?
@Ray remove 'use client' and all the hook
like i said, make it a server component
and pass the data down if you really need to use state
Alligator mississippiensisOP
yea thats what im doing, im making the fetch a server component and passing it down to my page.tsx
useEffect(() => {
if (jwtToken && !idsGrabbed) {
FetchOrdersId({ userEmail, setOrdersId, setIdsGrabbed });
}
if (idsGrabbed) {
ordersId.forEach(async (order: OrderIdType) => {
const orderId = order.orderId;
const orderData = await FetchOrders({ orderId, jwtToken });
setOrders((prevOrders) => [...prevOrders, orderData]);
});
}
}, [idsGrabbed]);Alligator mississippiensisOP
ohhh i see
okok
it makes sense now
@Alligator mississippiensis cs
useEffect(() => {
if (jwtToken && !idsGrabbed) {
FetchOrdersId({ userEmail, setOrdersId, setIdsGrabbed });
}
if (idsGrabbed) {
ordersId.forEach(async (order: OrderIdType) => {
const orderId = order.orderId;
const orderData = await FetchOrders({ orderId, jwtToken });
setOrders((prevOrders) => [...prevOrders, orderData]);
});
}
}, [idsGrabbed]);
like this
export default async function Home() {
const data = await fetch("", { next: { revalidate: 120 } }).then((res) =>
res.json()
);
return (
<main>
<Client data={data} />
</main>
);
}Answer
Alligator mississippiensisOP
yup sounds good, thanks!