Server Vs Client

// Server Components
import { auth, currentUser } from '@clerk/nextjs/server';

// Client Components
'use client';
import { useAuth, useUser } from '@clerk/nextjs';

import { auth, currentUser } from '@clerk/nextjs/server';

export default async function DashboardPage() {
  const { isAuthenticated } = await auth();
  if (!isAuthenticated) return <div>Please sign in</div>;

  const user = await currentUser();
  return <h1>Welcome, {user?.firstName}!</h1>;
}

'use client';
import { useUser, useAuth } from '@clerk/nextjs';

export function UserDashboard() {
  const { isLoaded, isSignedIn, user } = useUser();
  const { signOut } = useAuth();

  if (!isLoaded) return <div>Loading...</div>;
  if (!isSignedIn) return <div>Not signed in</div>;

  return (
    <div>
      <p>Hello, {user.firstName}!</p>
      <button onClick={() => signOut()}>Sign out</button>
    </div>
  );
}

// Server: fetch initial data
import { currentUser } from '@clerk/nextjs/server';
import { ProfileForm } from './ProfileForm';

export default async function ProfilePage() {
  const user = await currentUser();
  if (!user) return <div>Please sign in</div>;
  return <ProfileForm initialData={{ firstName: user.firstName }} />;
}

// Client: handle interactions
'use client';
import { useUser } from '@clerk/nextjs';

export function ProfileForm({ initialData }) {
  const { user } = useUser();
  return <form>...</form>;
}

import { Show } from '@clerk/nextjs';

<Show when="signed-in" fallback={<div>Please sign in</div>}>
  <Dashboard />
</Show>