UserProfile component triggers hard navs on Nextjs (and others)
Closed this issue · 11 comments
Preliminary Checks
- I have reviewed the documentation: https://clerk.com/docs
- I have searched for existing issues: https://github.com/clerk/javascript/issues
- I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
- 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 arlyon/litehouse@30921dd
- 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/AAre 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.
5.1.5 still displays the behaviour for me
- Commit here arlyon/litehouse@30921dd
- 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"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! 🙏
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.
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!
@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
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.
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.
Screenshot for reference
Hello 👋
We currently close issues after 40 days of inactivity. It's been 30 days since the last update here. If we missed this issue, please reply here. Otherwise, we'll close this issue in 10 days.
As a friendly reminder: The best way to see an issue fixed is to open a pull request. If you're not sure how to do that, please check out our contributing guide.
Thanks for being a part of the Clerk community! 🙏
Hello again 👋
After 40 days of no activity, we'll close 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.
As a friendly reminder: The best way to see an issue fixed is to open a pull request. If you're not sure how to do that, please check out our contributing guide.
Thanks for being a part of the Clerk community! 🙏