Please, can someone help me understand caching in nextjs and what's the purpose + useOptimistic?
Unanswered
Saltwater Crocodile posted this in #help-forum
Saltwater CrocodileOP
So I'm trying to create my components and to have as many server components as possible with as few client components as possible.
For example if I have a page where I
Now if my counter would come from my database inside the
Is this useOptimistic a new way of doing things instead of useState? But without the cache revalidation the values just
Can someone please make this workflow clear for me?
So in short:
1. Fetch data with 'use cache' and add a cacheTag.
2. When you update data, revalidate the cache for that specific tag.
Thank you.
For example if I have a page where I
press a button and increase a counter I would make the page let's call it Home a server component and then I would create a separate component for the button and counter or if they need to be separate I would have two components,IncrementButton andCounter which I would connect with a context and use useOptimistic to instantly update the counter.Now if my counter would come from my database inside the
fetchCounter function i would use a cacheTag like cacheTag('counter-value') then inside the incrementCounter function that updates the counter inside the database I would use revalidateTag('counter-value').Is this useOptimistic a new way of doing things instead of useState? But without the cache revalidation the values just
flickers to the new one and goes back to the old one, so cache revalidation is mandatory I guess?Can someone please make this workflow clear for me?
So in short:
1. Fetch data with 'use cache' and add a cacheTag.
2. When you update data, revalidate the cache for that specific tag.
Thank you.
9 Replies
ok so @Saltwater Crocodile
have you tried spamming emoji reactions in discord
basically what you will see is that you can instantly see the counter go up when you react.. but if you spam it.. you will get rate limited and the counter goes down
thats how useOptimistic works.. its not a like alternative to useState per se
its def not meant to be used for more critical parts of your app.. since it has a high chance of being bad ux
Imagine you are making a todo list.. and the developer made the list use useOptimistic..
now for most of the time you are very impressed with how everything is instant.. but as soon as any of the items error in the server, it will get rolled back to the last confirmed state, messing up ordering and making it feel unreliable.
now for most of the time you are very impressed with how everything is instant.. but as soon as any of the items error in the server, it will get rolled back to the last confirmed state, messing up ordering and making it feel unreliable.
hence why on discord its used only for reactions where its fun to see the counter go up really fast but its not like a critical thing
Good to know you’re keeping most components on the server unless you need client side features👍
Now, both cache revalidation and optimistic updates (useOptimistic) serve a different purpose, like Arinji said, you don’t want to have
So make use of
As for caching revalidation, you want to do this whenever you want the server state to be the source of truth and you need the latest value of it.
Now, both cache revalidation and optimistic updates (useOptimistic) serve a different purpose, like Arinji said, you don’t want to have
useOptimistic in every instance where you’d use useState, because this 1) is not an expected user experience in most cases and 2) is a de-optimization feature, which means it will force extra re-renders. I like to see it just like flushSync does to trigger immediate updates to be performed instead of batched.So make use of
useOptimistic only when it makes sense to and it’s not crucial for the user experience, because it’ll roll back to the original server state if the operator fails.As for caching revalidation, you want to do this whenever you want the server state to be the source of truth and you need the latest value of it.
@Saltwater Crocodile any updates?