clerk / javascript

Official JavaScript repository for Clerk authentication
https://clerk.com
MIT License
1.17k stars 265 forks source link

ClerkProvider breaks NextJS SSR w/ Suspense #4544

Open cirex-web opened 1 week ago

cirex-web commented 1 week ago

Preliminary Checks

Reproduction

https://github.com/cirex-web/next-theme-ignored-suspense/tree/clerk

Just a simple next js app with a layout, page, and client component wrapped in a suspense boundary. A promise is thrown in the client component to trigger the suspense boundary.

image

Publishable key

pk_test_YmVsb3ZlZC1jaGFtb2lzLTQzLmNsZXJrLmFjY291bnRzLmRldiQ

Description

Run pnpm dev

Expected behavior:

The infinite suspense triggered during the server render part of SSR should cause the nearest suspense boundary to display client-side. The client component should not render at all on the client until the suspense is resolved, but it does when we add ClerkProvider to the layout.

Actual behavior:

We see the component being rendered on the client through the console.log statement. (Removing ClerkProvider gets rid of this statement)

image

This is a dealbreaker for anyone that has SSR + progressive hydration, since the client component starts rendering before the matching server component finishes.

Environment

System:
    OS: macOS 13.4
    CPU: (8) arm64 Apple M2
    Memory: 72.77 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.12.2 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 9.9.0 - /usr/local/bin/pnpm
    bun: 1.1.27
  Browsers:
    Chrome: 130.0.6723.117
    Safari: 16.5
  npmPackages:
    @clerk/nextjs: ^6.3.1 => 6.3.1 
    @types/node: ^20 => 20.17.6 
    @types/react: ^18 => 18.3.12 
    @types/react-dom: ^18 => 18.3.1 
    eslint: ^8 => 8.57.1 
    eslint-config-next: 15.0.3 => 15.0.3 
    next: 15.0.3 => 15.0.3 
    react: 19.0.0-rc-66855b96-20241106 => 19.0.0-rc-66855b96-20241106 
    react-dom: 19.0.0-rc-66855b96-20241106 => 19.0.0-rc-66855b96-20241106 
    typescript: ^5 => 5.6.3
BRKalow commented 16 hours ago

Hi there! Could you share more details about what you're trying to accomplish with this pattern? In theory, anything that would cause this component to re-render on the client would trigger the promise again, your linked example exhibits the behavior with next-theme.