UserProfile component triggers hard navs on Nextjs (and others)

arlyon commented 1 month ago

Preliminary Checks

[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerk/javascript/issues
[X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
[X] This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

Commit here https://github.com/arlyon/litehouse/commit/30921dd9b0a290b75a84cefbdd038a5f6a48f29c
and you can validate the behaviour here https://litehouse.arlyon.dev/profile
source here: https://github.com/arlyon/litehouse/blob/main/site/app/(auth)/profile/[[...profile]]/page.tsx

Publishable key

pk_test_cHJvLW9yeXgtMjcuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

It would be nice if the router was able to specialize for frameworks and default to a client side nav in supported cases rather than a hard serverside one. This seems to already be the case for navigation between sign in and sign up.

Steps to reproduce:

Visit a self hosted profile
Click to a different tab
Observe hard navigation

Expected behavior:

I am using nextjs, so it would be nice if this leveraged the framework to make the navigation seamless.

Actual behavior:

A hard nav.

Environment

N/A

jescalan commented 1 month ago

Are you using the latest version of the nextjs SDK at the moment? We think we fixed this in the latest version, just want to confirm.

arlyon commented 1 month ago

5.1.5 still displays the behaviour for me

Commit here https://github.com/arlyon/litehouse/commit/30921dd9b0a290b75a84cefbdd038a5f6a48f29c
and you can validate the behaviour here https://litehouse.arlyon.dev/profile
source here: https://github.com/arlyon/litehouse/blob/main/site/app/(auth)/profile/%5B%5B...profile%5D%5D/page.tsx

Nothing here seems out of place. Feel free to make an account, I will delete it after (and I don't even have a DB so your personal data doesn't go anywhere except clerk). Locally, the project doesn't need any particular setup for reproing. Required env vars are as follows

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<redacted>
CLERK_SECRET_KEY=<redacted>
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"

clerk-cookie commented 1 month ago

Hello 👋

In an effort to keep our GitHub issues clean and focused, we close any issues that are awaiting a reproduction after 8 days on inactivity, and it has been 7 days. This issue will be closed tomorrow unless a reproduction is provided. If it takes longer than this to get a reproduction, that's ok, just drop a comment and we will remove the Stale label.

How to create a minimal reproduction

Thanks for being a part of the Clerk community! 🙏

clerk-cookie commented 1 month ago

After 8 days without a reproduction being supplied, we are closing this issue. Keep in mind, I'm just a robot, so if I've closed this issue in error, please reply here and my human colleagues will reopen it. Likewise if a reproduction is prepared after it has been closed.

jescalan commented 1 month ago

This isn't a minimal reproduction unfortunately, it's a link to part of an entire built-out app. Our instructions for creating a minimal reproduction linked above should outline how to make this happen!

arlyon commented 2 weeks ago

@jescalan please reopen https://github.com/arlyon/clerk-hard-nav

set env vars from a clerk app
visit /profile, sign in
visit /profile, switch between profile submenus
observe hard nav

Same applies to orgs fwiw

jescalan commented 2 weeks ago

Hey @arlyon - I just pulled down your reproduction and tested it, and there were no hard navigations performed when switching between profile tabs. Opening the developer console while the navigation is being performed shows dom elements being patched directly, and the network tab shows that there is no hard navigation running.

Some follow up questions:

I used the keys for a test clerk app I have set up. Did you have a different experience when using the reproduction? If so, the only difference would be the keys, so it may have to do with some configuration in the app you were using to test, though I can't really imagine what it would be.
Do we have different definitions of "hard nav" perhaps? I was seeing the app re-render, which sometimes causes a brief flicker on the screen as the dom is updated. Or are you interpreting the change in url as a hard navigation? If so, next.js normally will update the url directly even for a client-side navigation using the history api - seeing a change in the URL no longer means that a full navigation was performed after the introduction of this browser API.

arlyon commented 2 weeks ago

Oof thanks for the patience. What I thought was a 'hard nav' was the flicker accompanied with the catchall check in dev mode producing an html request in the network tab when switching pages. In production this does not happen and you are correct it is client-side only. My next request is, then, what I can do to reduce / eliminate the flicker. I take it this issue is that the clerk profile widget is not a react tree and needs to be re-initialized? If that is the case I can definitely live with it and will consider re-implementing it 'natively' down the line.

arlyon commented 2 weeks ago

Screenshot for reference

clerk / javascript