1# Server vs Client (CRITICAL)
2 
3## CRITICAL: Always `await auth()`
4 
5```tsx
6// WRONG
7const { userId } = auth(); // undefined!
8 
9// CORRECT
10const { userId } = await auth();
11```
12 
13## When to Use
14 
15- **Server Components** - Initial load, SEO, DB queries
16- **Client Components** - Interactive UI, sign out, token fetching
17 
18## Import Rules
19 
20```tsx
21// Server Components
22import { auth, currentUser } from '@clerk/nextjs/server';
23 
24// Client Components
25'use client';
26import { useAuth, useUser } from '@clerk/nextjs';
27```
28 
29## Server Component
30 
31```tsx
32import { auth, currentUser } from '@clerk/nextjs/server';
33 
34export default async function DashboardPage() {
35  const { isAuthenticated } = await auth();
36  if (!isAuthenticated) return <div>Please sign in</div>;
37 
38  const user = await currentUser();
39  return <h1>Welcome, {user?.firstName}!</h1>;
40}
41```
42 
43> **Core 2 ONLY (skip if current SDK):** `isAuthenticated` is not available. Use `const { userId } = await auth()` and check `if (!userId)` instead.
44 
45## Client Component
46 
47```tsx
48'use client';
49import { useUser, useAuth } from '@clerk/nextjs';
50 
51export function UserDashboard() {
52  const { isLoaded, isSignedIn, user } = useUser();
53  const { signOut } = useAuth();
54 
55  if (!isLoaded) return <div>Loading...</div>;
56  if (!isSignedIn) return <div>Not signed in</div>;
57 
58  return (
59    <div>
60      <p>Hello, {user.firstName}!</p>
61      <button onClick={() => signOut()}>Sign out</button>
62    </div>
63  );
64}
65```
66 
67## Hybrid Pattern
68 
69```tsx
70// Server: fetch initial data
71import { currentUser } from '@clerk/nextjs/server';
72import { ProfileForm } from './ProfileForm';
73 
74export default async function ProfilePage() {
75  const user = await currentUser();
76  if (!user) return <div>Please sign in</div>;
77  return <ProfileForm initialData={{ firstName: user.firstName }} />;
78}
79 
80// Client: handle interactions
81'use client';
82import { useUser } from '@clerk/nextjs';
83 
84export function ProfileForm({ initialData }) {
85  const { user } = useUser();
86  return <form>...</form>;
87}
88```
89 
90## Conditional Rendering
91 
92Use `<Show>` for client-side conditional rendering based on auth state:
93 
94```tsx
95import { Show } from '@clerk/nextjs';
96 
97<Show when="signed-in" fallback={<div>Please sign in</div>}>
98  <Dashboard />
99</Show>
100```
101 
102> **Core 2 ONLY (skip if current SDK):** Use `<SignedIn>` and `<SignedOut>` components instead of `<Show>`.
103 
104[Docs](https://clerk.com/docs/reference/nextjs/auth)
105