Bug occurs when I use `revalidate` and `router.push`

Answered

Scaly-naped Pigeon posted this in #help-forum

Scaly-naped PigeonOP

2024-01-08T12:57:01.000Z

'use server';

import { revalidateTag } from 'next/cache';

export default async function revalidate(tag: string) {
  revalidateTag(tag);
}

const onLoginSuccess = () => {
  // ...
  revalidate("accessToken");
  router.push("/");
}

URL is changed "/", but contents are not rendered
How to fix it? TT.

Answered by Ray

because you use router.push and there is a 30 sec router cache, you should use redirect in server action instead

13 Replies

2024-01-08T13:03:36.000Z

try

const onLoginSuccess = () => {
  // ...
  revalidate("accessToken");
  router.push("/");
  router.refresh();
}

Scaly-naped PigeonOP

2024-01-08T13:05:22.000Z

Oh!!..

fixed!

why I have to use refresh??

2024-01-08T13:07:52.000Z

because you use router.push and there is a 30 sec router cache, you should use redirect in server action instead

Answer

2024-01-08T13:08:15.000Z

or try this

export default async function revalidate(tag: string) {
  revalidateTag(tag);
  redirect("/")
}

and remove this from onLoginSuccess

-router.push("/");
-router.refresh();

Scaly-naped PigeonOP

2024-01-08T13:12:45.000Z

It works very well.
I have one more question.
I use popup this service. When I use revalidate, Re-render occurs.
I don't know how to fix it.

2024-01-08T13:14:58.000Z

can you show more code on where you call the popup?

or try to call the popup after the server action here

const onLoginSuccess = async () => {
  // ...
  await revalidate("accessToken");
  // show popup
}

Scaly-naped PigeonOP

2024-01-08T13:18:04.000Z

It works!

Thank you so much TTT

2024-01-08T13:18:43.000Z

no prob