Middleware causes flicker each time the page is loaded

[borispoehland]

Hello,

I'm using the authMiddleware as in the docs for my Next.js project:

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware();

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)"],
};

My @clerk/nextjs version is 4.17.2

Every time I open my URL, the page loads (blank, white screen), then "reloads" into the final form. This process is super slow and unpleasant to watch. It feels clunky and I feel like this is not the supposed behaviour. Here is an example:
https://next-middleware-demo.vercel.app/

Appreciate you looking into this

[borispoehland]

Bildschirmaufnahme.2023-05-09.um.19.14.27.mov

I attached you a screen recording, I think one can see what I mean (at around 2 seconds)

[borispoehland]

Any update on this?

[coycoylaniba]

i'm having the same issue, all pages always reloading if i have the middleware.ts

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
  publicRoutes: ["/", "/about", "/help", "/contact"],
});

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

[clerk-cookie]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[StevenLangbroek]

@borispoehland I reported the same issue in Discord, it's "working as intended" but I've asked for clarification as to why this is implemented this way.

[clerk-cookie]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[jescalan]

Responded to the same thing here: #1593 (comment)

We are actively looking into improving the white page flash, but as referenced above, this isn't a bug and is working as intended.

[seanparkross]

I know this issue is closed but this middleware speed degradation on first load (in my case 200ms to 2 to 3 seconds) is a big, big issue and against the core ethos of Next.js.

I'm definitely going to be losing traffic because of it.

Please could this be prioritised and the community kept informed on progress? 🙏

[panteliselef]

@seanparkross this will be improved in our next major, coming in mid January

[luizkc]

I'm still experiencing this in Clerk Core 2. I don't think the middleware is the cause of this. The <SignUp /> and <SignIn /> components load in (flicker in) after the page loads and cause a layout shift.

Screen.Recording.2024-05-09.at.2.12.42.PM.mov

Edit: Including attachment

[panteliselef]

Unfortunately this is still "expected" behaviour.

This original GH issue refers to a "white flash" that would happen on refresh before even the page was loaded. This was particularly obvious in slow connections.

That issue was fixed with Core 2

[luizkc]

@panteliselef I get it, but in the App Router demo, I can't seem to see this flickering. Or am I missing something?

https://clerk-nextjs-app-router.vercel.app/sign-in?redirect_url=https://clerk-nextjs-app-router.vercel.app/dashboard