Skip to content

Latest commit

 

History

History
55 lines (40 loc) · 5.1 KB

File metadata and controls

55 lines (40 loc) · 5.1 KB

🏡 Home

Start a new Supabase project Create a Next.js app with the create-next-app CLI Query Supabase data from Next.js Server Components Create an OAuth app with GitHub Authenticate users with GitHub OAuth using Supabase and Next.js Client Components Refresh session cookie for Next.js Server Components with Middleware Restrict access to authenticated users with RLS policies Dynamically render UI based on user session with SSR in Next.js Client Components Implement Protected Routes for authenticated users with Supabase Auth Generate TypeScript definitions from PostgreSQL schema with Supabase CLI Setup a Foreign Key relationship between PostgreSQL tables Automatically generate a profile for every user with PostgreSQL Function Triggers Run authenticated Server-side mutations with Next.js Server Actions Create a PostgreSQL join table in Supabase Studio Implement dynamic buttons with Next.js Client Components Declare global union types with Typescript Implement Optimistic UI with the Next.js useTransition hook Dynamically update UI with Database changes using Supabase Realtime Style a Twitter clone with Tailwind CSS Deploy Next.js App Router project to production with Vercel

Dynamically render UI based on user session with SSR in Next.js Client Components

📹 Video

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} />;

Resources


👉 Next lesson


Enjoying the course? Follow Jon Meyers on Twitter and subscribe to the YouTube channel.