Package + Version
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!
Package + Version
@clerk/nextjs@ 4.19.0Dependencies + 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-L105From what I can tell, even if a fully inflated
initialStateis 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!