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> :

https://user-images.githubusercontent.com/38298743/236710727-7ba6a40e-d6a1-403f-94d2-5cefebd73c0c.mov

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>
  );
}

https://user-images.githubusercontent.com/38298743/236711147-ad6a8ee2-cc64-4b78-ad57-4693a88a17e7.mov

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

NEXT-1129

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 4
  • Comments: 16 (7 by maintainers)

Most upvoted comments

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 of redirect which is what I adressed. Thanks.