Next.JS UI Component Pop-In with SSR

[Steven-Ireland]

• Review the documentation: https://clerk.com/docs
• Search for existing issues: https://github.com/clerkinc/javascript/issues
• Go through package changelog files.
• Provide the Frontend API key from your application dashboard. (pk_test_cG9zc2libGUtZ25hdC03NC5jbGVyay5hY2NvdW50cy5kZXYk)

Package + Version

• @clerk/nextjs @ 4.19.0

Dependencies + versions

{
  "dependencies": {
    "@clerk/nextjs": "^4.19.0",
    "@types/node": "20.2.5",
    "@types/react": "18.2.8",
    "@types/react-dom": "18.2.4",
    "next": "13.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.1.3"
  }
}

Browser/OS

Chrome / Windows

Description

I'm a new user of Clerk but not a new user of SSR, so I'm trying to piece all of this together -- apologies if I'm missing anything obvious! I love the idea of this application but am running into some unfortunate snags with server side props.

I'm using the pages/ directory style of next.js and no matter what I try, I can't escape components like <UserButton /> or <OrganizationSwitcher /> popping in on the client. The requests seem to originate from here in the Clerk context provider: https://github.com/clerkinc/javascript/blob/main/packages/react/src/contexts/ClerkContextProvider.tsx#L88-L105

From what I can tell, even if a fully inflated initialState is passed into the provider (inflated via SSR via this flow: https://clerk.com/docs/nextjs/getserversideprops), this isomorphic client still starts up on the client and fires off a request, and eventually the FE component loads.

It looks to me like the intent is to not block on that FE request -- judging by this code here that tries to use SSR provided state where possible: https://github.com/clerkinc/javascript/blob/main/packages/react/src/contexts/ClerkContextProvider.tsx#L39-L79

In other words, it looks like the intent is to support hydration from SSR props, but the current implementation doesn't work. I've created a repo here that showcases the issue: https://github.com/Steven-Ireland/clerk-bug-issue

and here's a gif: (note how useAuth() consistently returns true, but the other ui components pop in after a refresh)

There's a PR on that repo that shows only the relevant files: https://github.com/Steven-Ireland/clerk-bug-issue/pull/1/files

Thanks for taking a look!

[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.

[hwride]

I’d be interested to hear about this, I’ve also noticed the SSR pop-in.

[panteliselef]

Currently clerk will only render components with client side rendering. You can review this from the network tab by filtering js documents only.

[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.

[clerk-cookie]

This issue was closed because it has been stalled for 10 days with no activity.

[clerk-cookie]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.