loading…Loading
render rsc-blocking
Server Components that take 2-3 seconds to render produce loading states, but Suspense boundaries isolate them so each one streams in independently while the rest of the page stays interactive.
This Server Component uses auth() to check authentication status. It renders inside its own Suspense boundary with a loading state.
server component rendering (2s delay)...
This Server Component uses currentUser() to fetch complete user data. Compare its timing and data with the client-side version below.
server component rendering (3s delay)...
This client component uses useUser() to fetch the same user data. It shows identical data but hydrates almost instantly, independent of the slow RSCs above.
Hydrated in 0ms
No user data available
This fetched the same data client-side and hydrated almost instantly, independent of the slow server component above!
auth() and currentUser() can be used in async RSCsuseUser() fetch the same data client-side and hydrate independently without waiting for slow RSCsTook 2003ms to render on server
Auth Status: Not authenticated
This RSC took 2000ms to complete. Notice how client components below hydrated independently!
Server fetch took 3003ms
No user data available
Even though this took 3000ms, client components using useAuth() and useSession() became interactive immediately!