Dynamically Render UI Based on User Session with SSR in Next.js Client Components
The first render of a Client Component happens on the server. This is called Server-side rendering (SSR). However, Client Components are synchronous, so they cannot suspend rendering while fetching data - such as the user's session. This means we either need to display a loading spinner or render the logged out state, while fetching that async data, causing a flash of incorrect state for the user.
In this lesson, we look at rendering a Client Component from a Server Component that can asynchronously fetch the user's Supabase session, and pass it as a prop to the Client Component, making the user's session available on its first SSR render.
Code Snippets
Render Client Component from Server Component
const {
data: { session },
} = await supabase.auth.getSession();
return <ClientComponent session={session} />;