Revalidate a component
Answered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
Hello everyone!
I have a website that has a different colour on each category. I have it working that if I update a page from my CMS, I use a webhook to revalidate that web page. But if I update the category colour, I don't want to revalidate 100+ pages. My thought is the best thing to do is to 'use client' on the category component, and only revalidate the component. This means all pages are still statically rendered and only on load it will fetch the latest category colour on the server.
I don't want to be making API calls on every refresh so I think this sounds like the best way to go about it. Unless there is a better way which I haven't thought about? I am open to ideas!
Any help would be greatly appreciated, thanks!
I have a website that has a different colour on each category. I have it working that if I update a page from my CMS, I use a webhook to revalidate that web page. But if I update the category colour, I don't want to revalidate 100+ pages. My thought is the best thing to do is to 'use client' on the category component, and only revalidate the component. This means all pages are still statically rendered and only on load it will fetch the latest category colour on the server.
I don't want to be making API calls on every refresh so I think this sounds like the best way to go about it. Unless there is a better way which I haven't thought about? I am open to ideas!
Any help would be greatly appreciated, thanks!
Answered by joulev
it looks good to me – if you want to make API calls in the browser. that has always been the way in the pages directory and there's nothing wrong with that.
but in the app directory, you can also use tags to tag your fetches and then use
but in the app directory, you can also use tags to tag your fetches and then use
revalidateTag to revalidate individual tags => it is possible to revalidate individual components in this way https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating#on-demand-revalidation2 Replies
@Cuvier’s Dwarf Caiman Hello everyone!
I have a website that has a different colour on each category. I have it working that if I update a page from my CMS, I use a webhook to revalidate that web page. But if I update the category colour, I don't want to revalidate 100+ pages. My thought is the best thing to do is to 'use client' on the category component, and only revalidate the component. This means all pages are still statically rendered and only on load it will fetch the latest category colour on the server.
I don't want to be making API calls on every refresh so I think this sounds like the best way to go about it. Unless there is a better way which I haven't thought about? I am open to ideas!
Any help would be greatly appreciated, thanks!
it looks good to me – if you want to make API calls in the browser. that has always been the way in the pages directory and there's nothing wrong with that.
but in the app directory, you can also use tags to tag your fetches and then use
but in the app directory, you can also use tags to tag your fetches and then use
revalidateTag to revalidate individual tags => it is possible to revalidate individual components in this way https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating#on-demand-revalidationAnswer
Cuvier’s Dwarf CaimanOP
That's very helpful thank you, will try these tags out!