How to update current route data by using revalidate tag in the server action??

[takakikasuga]

How can I update current data by revalidate tag

Now, I study app router and the next cahce like data cache and so on...
I try to do some option of fetch and revalidate tag and path.
today, I use revalidate tag in the server action, and I wanna update data of the tag and I don't expect to update data other than tag.

In this below video, I updated layout tag in the ActionLayout, but after revalidate layout tag, other tag data like page tag in the ActionPage and root tag int the RootLayout was updated.
I don't know this action happend...

additionally, after updated data related to all tags and reload the browser, layout tag was updated correctly but, other than tag like page tag and root tag wasn't updated and display old cached data...

2024-06-25.13.54.26.mov

How can I update current data by revalidate tag???👀

but,,, there is one thing, I succeeded in the specified tag's data.

I inject redirect function after revalidate tag and redirect to current route, I can found the my expectation that layout tag was updated and other than tag like page tag and root tag wasn't updated like below the video.
but I don't know this implementation is correct because this implementation example don't be writtern in the nextjs official document.
（I refered to the this youtube）

2024-06-25.14.01.22.mov

I love the nextjs, thank you for your project and the best effort for software enginner!!

Operating System

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 20.14.0
  npm: 10.5.0
  Yarn: 4.3.0
  pnpm: N/A
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.3
Next.js Config:
  output: N/A

My sample example

sturcture of front-end

Endpoint: http://localhost:4000/v1/health/{a|b|c}
⇨ this end-point just return timestamp

{
  "time": "2024-06-25T04:46:22.755Z"
}

• /app/action/layout.tsx

import { type ReactNode } from "react";
import { api } from "~/lib/fetch";

const RootLayout = async ({ children }: { children: ReactNode }) => {
  const result = await fetch("http://localhost:4000/v1/health/a", {
    next: {
      tags: ["root"],
    },
  });
  const { time } = await result.json();

  return (
    <main className="bg-blue-300">
      <p>RootLayout {time}</p>
      {children}
    </main>
  );
};

export default RootLayout;

• /app/action/inner-action/layout.tsx

import { type ReactNode } from "react";
import { ActionComponent } from "../_component/action-component";

const ActionLayout = async ({ children }: { children: ReactNode }) => {
  const result = await fetch("http://localhost:4000/v1/health/b", {
    next: {
      tags: ["layout"],
    },
  });
  const { time } = await result.json();

  return (
    <main className="bg-blue-500">
      <p>ActionLayout {time}</p>
      {children}
      <ActionComponent />
    </main>
  );
};

export default ActionLayout;

• /app/action/inner-action/page.tsx

const ActionPage = async () => {
  const result = await fetch("http://localhost:4000/v1/health/c", {
    next: {
      tags: ["page"],
    },
  });
  const { time } = await result.json();

  return (
    <main className="bg-blue-700">
      <p>Action Page {time}</p>
    </main>
  );
};

export default ActionPage;

• /app/action/_component/action-component.tsx

import { revalidateTag } from "next/cache";
// import { redirect } from "next/navigation";

export const ActionComponent = () => {
  async function action() {
    "use server";

    revalidateTag("layout");
    // redirect("/action/inner-action");
  }

  return (
    <form action={action}>
      <button type="submit" className="p-2 border-gray-400 bg-white border rounded">
        Submit Action
      </button>
    </form>
  );
};