what does revalidatepath and revalidatetag do in server actions and how do I use it
#Server actions with forms and mutations
fair bone
fickle archBOT
Hi @fair bone. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
revalidatePath and revalidateTag are functions provided by Next.js for on-demand data revalidation in Server Actions. They allow you to manually invalidate the Next.js Cache, ensuring that your data is up-to-date.
revalidatePath allows you to revalidate data and re-render the route segments below a specific path in a single operation. It revalidates the Data Cache, which in turn invalidates the Full Route Cache. Here's an example of how to use it:
'use server'
import { revalidatePath } from 'next/cache'
export default async function submit() {
await submitForm()
revalidatePath('/')
}
(Source: Next.js Docs (https://nextjs.org/docs/app/api-reference/functions/revalidatePath))
revalidateTag allows you to purge cached data on-demand for a specific cache tag. It only invalidates the cache when the path is next visited. Here's an example of how to use it:
'use server'
import { revalidateTag } from 'next/cache'
export default async function submit() {
await addPost()
revalidateTag('posts')
}
(Source: Next.js Docs (https://nextjs.org/docs/app/api-reference/functions/revalidateTag))
You can add tags to fetch as follows:
fetch(url, { next: { tags: [...] } });
These functions are particularly useful in Server Actions, where they can be used to revalidate data after a user interaction, such as a form submission or a button click. They can also be used in Route Handlers to revalidate data in response to a third-party event, such as a webhook.
Remember to enable Server Actions in your next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
serverActions: true,
},
};
module.exports = nextConfig;
(Source: Next.js Blog (https://nextjs.org/blog/next-13-4))
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
fair bone
@fickle arch what is tag and how do I create and use it
fickle archBOT
Let me check the knowledge base for you. One moment! :books:
In the context of Next.js, a tag is a label that you can assign to your data when you fetch it. Tags are used in conjunction with the revalidateTag function to invalidate and re-fetch specific pieces of data on-demand.
To use tags, you add them to your fetch calls like this:
fetch(url, { next: { tags: ['tag1', 'tag2'] } });
In this example, the data fetched from url is tagged with 'tag1' and 'tag2'. You can then use revalidateTag to invalidate this data:
import { revalidateTag } from 'next/cache'
// ...
revalidateTag('tag1')
This will cause Next.js to re-fetch any data tagged with 'tag1' the next time it is needed.
Remember that revalidateTag only invalidates the cache. The data is not actually re-fetched until the next time it is accessed. This makes revalidateTag a good choice for data that is not immediately needed, as it allows you to control when the data is re-fetched and updated.
Please note that the use of tags and the revalidateTag function is part of the experimental Server Actions feature in Next.js, and you need to enable Server Actions in your next.config.js to use them:
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
serverActions: true,
},
};
module.exports = nextConfig;