First, don’t mark server components with “use server”. (Your code snippet seems to indicate you’re marking the Server Component with it)

Components are Server Components by default, what “use server” does is exposing async functions as POST endpoints to be reachable by the client. Don’t do this, “use server” and “use client” aren’t opposite to each other.

The only way to trigger a refresh from the server is to call revalidatePath() or revalidateTag() inside your Server Actions or Route Handlers

if I dont use "use server" i cant use import { revalidateTag } from 'next/cache'; .

But you’re gonna call revalidateTag/revalidatePathinside the server action, and that file will be marked with “use server”

Also… are you using both the pages/ and app/ routers?

app route only in nextjs 15

I asked because the error message says something about importing a component that uses "revalidateTag" inside the pages/ folder

i am not sure about the pages directory in that error too

'use client';

import { updateText } from './parent_comp';

export default function ClientComp() {
  const handleClick = async () => {
    await updateText('devtz007', { next: { tags: ['textUpdate'] } }); // Pass cache tag
  };

  return (
    <button
      onClick={handleClick}
      style={{ color: 'black', background: 'coral' }}
    >
      Send Text
    </button>
  );
}

and

'use server';

import ClientComp from './client_comp';
import { revalidateTag } from 'next/cache';

let text = 'initial text'; // This would be in a DB in production

// ✅ Server action to update text with cache tag revalidation
export async function updateText(
  newText: string,
  options: { next: { tags: string[] } },
) {
  if (options.next.tags.includes('textUpdate')) {
    // Perform the text update only if the 'textUpdate' tag is present

    text = newText; // Update the text
    revalidateTag('textUpdate'); // Revalidate the correct tag
  }
}

// ✅ Server Component (Automatically updates when `textUpdate` tag is revalidated)
export default async function ParentComp() {
  return (
    <>
      <p style={{ color: 'green', backgroundColor: 'coral' }}>{text}</p>
      <p>abcd</p>
      <ClientComp />
    </>
  );
}

. i used revalidateTag() and it works with immediate effect. but I dont quite sure if it really revalidating only for related things. also i have noticed if i move ClientComp somewhere else and clicked the button there, in parent comp effect doesnt apply immediately.

revalidateTag() triggers the fetch to run again and fetch fresh data, after that, the new React Server Component payload coming from the Server Action reconciliates with the existing Virtual DOM on the browser to only update the necessary DOM nodes and preserve state.

also i have noticed if i move ClientComp somewhere else and clicked the button there, in parent comp effect doesnt apply immediately.

Not sure I understand what you're saying but.. this is probably because the data is invalidated, which means it needs to be fetched again but you need to trigger it. Try refreshing the page and see if you load the latest data.

Also, if both of your server action updateText()and your server component ParentComp() are in the same file marked with "use server" that's a bad practice.

Only server actions should be exported from files marked with "use server". You're exposing all exported async functions as POST endpoints.

actions.tsx

'use server';
import { revalidateTag } from 'next/cache';

const textStore = new Map<string, string>();
textStore.set('text', 'initial'); // Default value

export async function updateTextAction(
  newText: string,
  options: { next: { tags: string[] } },
) {
  if (options.next.tags.includes('aaa')) {
    textStore.set('text', newText); // Store updated text
    revalidateTag('aaa'); // Revalidate cache
  }
}

export default async function getText() {
  return textStore.get('text');
}

, client_comp.tsx

'use client';

import { updateTextAction } from './actions';

export default function ClientUpdater() {
  const handleUpdate = async () => {
    await updateTextAction('devtz007', { next: { tags: ['aaa'] } });
  };

  return (
    <div>
      <button onClick={handleUpdate}>Update</button>
    </div>
  );
}

, text_show.tsx

export default async function ServerComp(prop) {
  console.log(prop.prop);

  return (
    <div>
      <div>Received Text: {prop.prop}</div>
    </div>
  );
}

, page.tsx

/* Import components */
import getText from '@/learning_playground/async/actions';
import ServerComp from '@/learning_playground/async/text_show';
import ClientComp from '@/learning_playground/async/client_comp';

import './page.scss';

const ExLayout = async () => {
  const text = await getText();
  console.log(text);

  return (
    <div className="exLayout">
      <div>Page</div>
      <ServerComp prop={text} />
      <ClientComp />
    </div>
  );
};

ExLayout.displayName = 'ExLayout';

export default ExLayout;

. this is my setup . is this setup okay? I have made action server comp as your recommendation. I have placed revalidatetag on the actions.tsx component. is this ok?

Is everything working as you expected now? If so, all looks good to me except one little detail I’ve mentioned before.

Prefer not to fetch data with Server Actions, instead, move that fetching logic to a different file not marked with “use server” and call it directly on your Server Component.

To fetch data, always prefer to do it directly inside of Server Components, which means you can inline the data fetching logic inside the Server Component body, or make a little utility function outside of the “use server” scope, and call this “regular” async function inside of your component (my preferred approach).

Minor details:
- the actions file doesn’t need the .tsx extension, just .ts is fine
- prefer declaring components as function statements so you don’t need to manually specify a DisplayName.

yeah. does the validateTag implementation right?

ok thank you

Looks good, passing the whole tag object to the action seems a little unnecessary tho.
await updateTextAction( 'devtz007', { next: { tags: ['aaa'] } } );

Just pass the tag, you know it beforehand. Same inside the server action, just call revalidateTag() with the “aaa” tag.

I assume you tried running your app and it works?

yeah it works fine. But what happen if I implement same things in another page?

in their documentation they use like this .

I mean the way you work with tags is apart from the implementation, you can continue to do it your way.

Not sure I follow you here, but what that’s doing is tagging a fetch request to open the possibility that you invalidate directly that fetch call via revalidateTag()

thats nextjs documentation

ok. thank you so much for you help. 🥰

Glad I could help;), mark the solution for the original question!

how to mark?

Right click > Apps > Mark solution

Or on phone hold on message > Apps > Mark solution

ok i am trying to figure out wheres the solution..

oh found it