next.js: [NEXT-1129] using nextjs `redirect()` function causes flashing UI
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.5.0: Tue Apr 25 04:07:22 PDT 2023; root:xnu-8796.121.2~8/RELEASE_ARM64_T8103
Binaries:
Node: 18.15.0
npm: 9.5.0
Yarn: 1.22.18
pnpm: 7.1.0
Relevant packages:
next: 13.4.1
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true)
Link to the code that reproduces this issue
https://github.com/Fredkiss3/bug-next-redirect-flashing-ui
To Reproduce
Go to the app, submit the form by clicking on the button, you will see the UI flash everytime there is a redirect. You can also click on the link and in the first navigatino you will see that the ui will flash.
Describe the Bug
You can see in the video below, the UI flashes when we use redirect either within a server action or during a client navigation with <Link>
:
Expected Behavior
There should not be flash in the UI, and i don’t know there is in the first place, one thing though is that if you use revalidatePath(...)
in the action instead of redirect(...)
, you will see the UI update in place without any flash, you can see in the video attached :
import { revalidatePath } from "next/cache";
export default function Home() {
async function action() {
"use server";
revalidatePath("/");
}
return (
<main>
<h1>Flashing UI ? {new Date().valueOf()} </h1>
<form action={action}>
<button>Revalidate with form</button>
</form>
</main>
);
}
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 4
- Comments: 16 (7 by maintainers)
Hi @balazsorban44 , the bug is indeed fixed but only for server actions, when using link navigation, it still shows a flash of white before redirecting to the correct route, at least on the first navigation.
https://github.com/vercel/next.js/assets/38298743/415037db-31a9-4cde-9b13-4f7c6eb99c3a
Specifically this feature is needed: https://github.com/facebook/react/pull/26854
Hi, this should have been fixed on newer versions, please upgrade and let us know! Feel free to open a new issue if you still experience this.
I can confirm, happens to me as well. Very noticeable if you have a dark themed app and the screen will just flash white for a millisecond (no css) while revalidating (epilepsy warning)
You are using onclick event on server component which causes your whole page to rereder. You may wanna try “use client” on the component. Refer to docs for more clarification https://nextjs.org/docs/getting-started/react-essentials
Moreover, you can try writing your function as follow to avoid form submission default functionality of refresh:
async function action(e) { e.preventDefault(); "use server"; revalidatePath("/"); }
Hi! I observe the same as @Fredkiss3. When using redirect inside a server page from a link navigation the flashing still occurs.
Missed that one, thanks for the hint, good to know! I misread the first comment about it potentially happening with
revalidatePath
instead ofredirect
which is what I adressed. Thanks.