How do I trigger refetch for specific server components when a server action is triggered?

[formal horizon]

Hi @hardy cloak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To trigger a refetch for specific server components when a server action is triggered, you can use the revalidatePath or revalidateTag functions from Next.js. Here's how you can do it:

1. Using revalidatePath:

If you want to revalidate an entire route or page, you can use revalidatePath in your server action:

'use server'

import { revalidatePath } from 'next/cache'

export async function createPost() {
  try {
    // ... your data creation logic here
  } catch (error) {
    // ... error handling
  }

  revalidatePath('/posts')
}

This will revalidate the /posts route and all its server components.

2. Using revalidateTag:

For more granular control, you can use revalidateTag. First, tag your data fetches in the server components:

export default async function Page() {
  const data = await fetch('<https://api.vercel.app/blog',> {
    next: { tags: ['posts'] },
  })
  const posts = await data.json()
  // ...
}

Then, in your server action, use revalidateTag:

'use server'

import { revalidateTag } from 'next/cache'

export async function createPost() {
  try {
    // ... your data creation logic here
  } catch (error) {
    // ... error handling
  }

  revalidateTag('posts')
}

This will revalidate all data fetches tagged with 'posts' in the cache.

By using these methods, you can ensure that your server components are refreshed with the latest data when your server action is triggered.

Next.js Docs: Revalidating data

Remember to import these functions from 'next/cache' and use them within your server action. This approach allows you to precisely control which parts of your application are refreshed when new data is added.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@hardy cloak Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Let me check the knowledge base for you again. Give me one moment! :books:

---

I understand you're not using fetch and are looking for a way to tag non-fetch calls for revalidation. In this case, you can use the unstable_cache function along with cacheTag to achieve similar functionality. Here's how you can do it:

1. First, enable the dynamicIO flag in your next.config.js file:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
  },
}

export default nextConfig

2. Then, in your data fetching function or component, use unstable_cache and cacheTag:

import { unstable_cache } from 'next/cache'
import { unstable_cacheTag as cacheTag } from 'next/cache'
import { db, posts } from '@/lib/db'

const getCachedPosts = unstable_cache(
  async () => {
    cacheTag('posts')
    return await db.select().from(posts)
  },
  ['posts'],
  { revalidate: 3600, tags: ['posts'] }
)

export default async function Page() {
  const posts = getCachedPosts()
  // ...
}

3. In your server action, you can then use revalidateTag to invalidate the cache:

'use server'

import { revalidateTag } from 'next/cache'

export async function createPost() {
  try {
    // ... your data creation logic here
  } catch (error) {
    // ... error handling
  }

  revalidateTag('posts')
}

This approach allows you to tag and revalidate cached data even when you're not using fetch.

Next.js Docs: cacheTag
Next.js Docs: Incremental Static Regeneration (ISR)

Remember that the cacheTag function is currently available in the canary channel and is subject to change. Make sure you're using the latest version of Next.js that supports this feature.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: