Next.js Discord

Discord Forum

Unexpected behaviour with `dynamic` route segment in app dir

Answered
Wuchang bream posted this in #help-forum
Open in Discord
Wuchang breamOP
Even after marking a server component dynamic it is being cached dont know why.

I have also shown the problem in video.

This is how my server component looks. it only loads one time then shows cached using links.
const Sample = async () => {
  await new Promise((resolve: any) => setTimeout(resolve, 1000));
  return <div>Sample</div>;
};

export default Sample;
export const dynamic = "force-dynamic";
Answered by Chinese Egret
Yes, exactly. You cn read more about caching here: https://nextjs.org/docs/app/building-your-application/caching
View full answer

32 Replies

Chinese Egret
dynamiconly makes to route render on every request, it will not get statically generated during build. Next.js still caches the route on the client for a time even if it is dynamic. You could refresh the route manually
Next caches the route for 30 seconds when it is dynamucally generated
Wuchang breamOP
So is there no way to make it a complete dynamic like I don't want those 30 secs of caching
Chinese Egret
You cannot out-out, no but you can invalidate, with route.refresh()
Wuchang breamOP
Where did you find that dynamic route is cached for 30 secs ?
Can you point me towards docs ? It'll be a great help
And here is the section of the client cache:
Wuchang breamOP
Thanks 🙏
But i had a doubt, like using a server component just to load initial data is a good choice? Like it doesn't render any HTML but it's children client component utilise that data to render HTML
Chinese Egret
There are many pros to use server components for data fetching, waterfall etc. Why would you need to fetch in client components for this application?
Wuchang breamOP
the above code was just to show the problem i am facing
actually i am building an e-commerce application
const CartPage = async () => {
  const user = await getUser();
  const cartItems = await getCartItems(user?.id);

  return (
    <section className="max-w-7xl mx-auto space-y-4 md:space-y-0 md:gap-x-9 md:flex md:relative">
      <CartItemList initialCartItems={cartItems} />
      <BillDetials />
    </section>
  );
};
export const dynamic = "force-dynamic";
this is how my CartPage look
as you can see it a server component with dynamic and CartItemList is a client component which uses the initial data provided.
Is it a right approach to how Cart of an e-commerce ?
Chinese Egret
Are you getting data directly from the database?
Wuchang breamOP
yes from the DB
that's the reason i dont want those 30 secs of cache
I think using react-query a good place to be used right ?
Chinese Egret
You dont want it because the route can show stale data when user removes from cart? If I understand correctly?
Chinese Egret
Alright, then I would do it like this. When user want to remove from cart, you make a request to your next server, i think? In that route handler or server action you could use revalidatePath to revalidate client cache or use router.refresh()on the client when item gets removed. The you wont have that 30 seconds.
Wuchang breamOP
  const handleDelete = () => {
    dispatch(removeCartItem(id));
    deleteCartItemMutation.mutateAsync(id);
    router.refresh();
  };
you mean something like handleDelete ? if not using server actions ?
Chinese Egret
Yes, exactly. You cn read more about caching here: https://nextjs.org/docs/app/building-your-application/caching
Answer
Wuchang breamOP
@Chinese Egret really thanks 😃. you dont know i was struck on this problem of caching from tomorrow.
Chinese Egret
No problem, you know what yo say
"There are two hard parts about programming:
1. Naming things
2. Caching
Wuchang breamOP
😂 so true.