revalidatePath seems not to be working from App Router

[flotischoti]

Summary

Hola,
This is my /app/api/revalidate endpoint:

import { revalidatePath } from 'next/cache'
import { NextResponse } from 'next/server'

export async function POST(request: Request) {
  const { path } = await request.json()
  revalidatePath(path)
  return NextResponse.json({ revalidated: true }, { status: 200 })
}

In my /app/layout.tsx root layout I'm calling a dummy fetch method:

export default async function RootLayout({children}) {
   const test = await fetch('http://worldtimeapi.org/api/timezone/Europe/Berlin')`
   ...
}

My expectation was, that the fetch() will be executed each time I hit the revalidate endpoint with request body {'path':'/'}, but this only happens once or not at all in my VsCode terminal.

The underlying problem is that I'm looking for a way to re-render my root layout as it contains the global navigation bar with links that should be displayed/hidden based on the login state of the user. So, at least after login or logout, I want the root layout to check again, if a JWT token is present with the next request but I just don't get what'd be the best approach for that. Even if revalidatePath caused all fetches to be executed again, the JWT token would'nt be available because it is supposed to be retrieved from the cookies() function upon client request and passed to fetch('/api/auth/status') as x-access-header to check if the token is valid... I'm confused.

Additional information

No response

Example

No response

[icyJoseph]

I think, within an API Route there's no communication between the APP and the Server Side runtime, to get immediate feedback, that's where Server Actions kick in: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions

So you gotta define a server action and call it when you want to invalidate the client side server component cache.

When does revalidatePath work from API routes? It is more like, the cached data for a path will be fetch again on the next time you hit the same path.

I am bit foggy on revalidatePath, but using server actions is the way I got an app I am currently working with. Similarly to your case, I need to refresh a page after a user action. revalidatePath in the API route did nothing, but a server action did the trick.

[flotischoti]

I wonder, why they use API routes in the revalidatePath documentation then.

Thanks for pointing me in the direction of server actions. Unfortunately, they don't fully do the trick for me, yet. I'm calling them from a login form in a client component. <form action={callLoginServerAction}> ... </form>

On first request, I always receive an error static generation store missing in revalidateTag when I put revalidatePath('/') in the Server Action. After hitting F5 and submitting the form again, it works.
Next thing I'm wondering is how can I implement proper error handling as Server Actions seem to always return 200 OK. Can I somehow get a regular Response object?
And lastly, my /logout component doesn't have a form. It simply calls the logout API after loading in an useEffect(). I guess it's not possible to call a Server Action from here or without user interaction right now?

For completeness, this is my loginServerAction:

'use server'

import { revalidatePath } from 'next/cache'
import { cookies } from 'next/headers'

export async function loginServerAction(formData: FormData) {
  console.log(`Executing loginServerAction`)
  const data = {
    email: formData.get('email'),
    password: formData.get('password'),
  }

  const response = await fetch(`http://localhost:3000/api/auth/login/`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })

  const result = await response.json()

  if (response.status == 200) {
    revalidatePath('/')

    cookies().set({
      name: 'token',
      value: result.token,
      path: '/',
      secure: true,
      httpOnly: true,
      sameSite: 'lax',
    })
  }

  return { status: response.status, text: result.text }
}

And this is the client function callLoginServerAction

import { loginServerAction } from '../actions'
async function callLoginServerAction(formData: FormData) {
    console.log(`Calling loginServerAction from Client Component`)
    const { status, text } = await loginServerAction(formData)
    if (status == 200) {
      const targetUrl = searchParams.get('target')
      router.push(targetUrl ? targetUrl : `/`)
    }
    setError(text)
  }

[erikbcode]

To answer your question on custom responses: I have recently been playing around with server actions trying to do everything that I would traditionally do with an API route with a server action instead. What I have been doing to handle errors / responses is define a types file with request and response types that correspond to each server action. All of these custom types have a status code which can then be tested for on the frontend.

Example types:

interface FetchAllPostsOptions {
  page?: number;
}

interface FetchAllPostsResponse {
  status: number,
  data: {
    title: string;
    description: string;
  }
}

Responses without a status of 200 can then display a toast error, etc...

Hopefully they add native handling for requests/responses to server actions, but for now this is what have been using. Let me know if you have found something else; I'm open to suggestions.

[flotischoti]

Thank you for your suggestion. I was kind of already doing that but I'm not a big fan of getting an official HTTP response code 200 while at the same time having an error code within the response.
Let's hope for better request/response handling with server actions in future. For now, I wish I had just used Remix instead of next.js :)

[flotischoti]

Just stumbled across this (possibly new?) page in the docs. Seems like setting custom error messages in the response of a server action is the way to go.
https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations

I'll start shifting from API routes to server actions then wherever possible.

[kasunkavinda]

Although you put a revalidatePath inside server action, if that particular action is getting called inside client component, it won't work. method call should be also in the server component and should pass the data as prop to subsequent client components if have