1
React Component Types
2
├── Server Component
3
│   ├── Runtime environment: server / edge nodes
4
│   ├── Capabilities: data fetching, server-side resource access
5
│   └── Limitations: cannot use useState/useEffect
6
│
7
├── Client Component
8
│   ├── Runtime environment: browser
9
│   ├── Capabilities: state management, interaction logic
10
│   └── Requirement: declare "use client" at the top
11
│
12
└── Shared Component
13
    ├── Runtime environment: both sides
14
    ├── Capabilities: stateless UI rendering
15
    └── Limitations: comply with both-side constraints

1
// app/posts/page.tsx (Server Component)
2
// Access the database directly, no API layer needed
3
async function PostsPage() {
4
  const posts = await db.posts.findMany({
5
    orderBy: { createdAt: 'desc' },
6
    take: 20
7
  });
8

9
  return (
10
    <main>
11
      <h1>Latest Articles</h1>
12
      {/* Server Components pass data directly to Client Components */}
13
      <PostsList posts={posts} />
14
      {/* Client-side interactive component */}
15
      <CreatePostForm />
16
    </main>
17
  );
18
}

1
// app/components/CreatePostForm.tsx (Client Component)
2
'use client';
3

4
import { useState } from 'react';
5

6
export function CreatePostForm() {
7
  const [title, setTitle] = useState('');
8

9
  const handleSubmit = async (e: FormEvent) => {
10
    e.preventDefault();
11
    // Server Actions - call server functions directly
12
    await createPost({ title });
13
  };
14

15
  return (
16
    <form onSubmit={handleSubmit}>
17
      <input
18
        value={title}
19
        onChange={(e) => setTitle(e.title.value)}
20
        placeholder="Article Title"
21
      />
22
      <button type="submit">Publish</button>
23
    </form>
24
  );
25
}

1
import { useActionState } from 'react';
2

3
function ContactForm() {
4
  const [state, formAction] = useActionState(submitContactForm, null);
5

6
  return (
7
    <form action={formAction}>
8
      <input name="email" type="email" required />
9
      <textarea name="message" required />
10
      <button type="submit">Send</button>
11
      {state?.success && <p>Sent successfully!</p>}
12
      {state?.error && <p>Send failed: {state.error}</p>}
13
    </form>
14
  );
15
}

1
import { useFormStatus } from 'react-dom';
2

3
function SubmitButton() {
4
  const { pending } = useFormStatus();
5

6
  return (
7
    <button type="submit" disabled={pending}>
8
      {pending ? 'Sending...' : 'Send'}
9
    </button>
10
  );
11
}

1
import { useOptimistic } from 'react';
2

3
function LikeButton({ postId, initialLikes }) {
4
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(
5
    initialLikes
6
  );
7

8
  const handleLike = async () => {
9
    // Update the UI immediately
10
    setOptimisticLikes(prev => prev + 1);
11
    // Send the request in the background
12
    await likePost(postId);
13
  };
14

15
  return (
16
    <button onClick={handleLike}>
17
      👍 {optimisticLikes}
18
    </button>
19
  );
20
}

1
import { use } from 'react';
2

3
function UserProfile({ userPromise }) {
4
  const user = use(userPromise);
5

6
  return (
7
    <div>
8
      <h2>{user.name}</h2>
9
      <p>{user.bio}</p>
10
    </div>
11
  );
12
}

1
// No configuration needed, the compiler optimizes automatically
2
function UserList({ users }) {
3
  // No need for useMemo
4
  const sortedUsers = users.sort((a, b) => a.name.localeCompare(b.name));
5

6
  // No need for useCallback
7
  const handleClick = (user) => {
8
    console.log('Clicked:', user.name);
9
  };
10

11
  return (
12
    <ul>
13
      {sortedUsers.map(user => (
14
        <li key={user.id} onClick={() => handleClick(user)}>
15
          {user.name}
16
        </li>
17
      ))}
18
    </ul>
19
  );
20
}

1
'use server';
2

3
// ✅ Good practice: explicit permission check
4
export async function deleteUser(userId: string) {
5
  const user = await getCurrentUser();
6
  if (!user.isAdmin) {
7
    throw new Error('Unauthorized');
8
  }
9

10
  // Input validation
11
  if (!userId || typeof userId !== 'string') {
12
    throw new Error('Invalid userId');
13
  }
14

15
  await db.user.delete({ where: { id: userId } });
16
  revalidatePath('/users');
17
}
18

19
// ❌ Dangerous practice: no permission check
20
export async function deleteUser(userId: string) {
21
  await db.user.delete({ where: { id: userId } });
22
}