React Server Components Complete

# React Server Components Complete Guide for Google Antigravity

Build performant applications with React Server Components using Google Antigravity IDE.

## Server Component Basics

```typescript
// app/users/page.tsx - Server Component (default)
import { db } from "@/lib/db";
import { Suspense } from "react";

export default async function UsersPage() {
  const users = await db.query.users.findMany({
    with: { profile: true },
    orderBy: (users, { desc }) => [desc(users.createdAt)]
  });

  return (
    <div className="container py-8">
      <h1 className="text-3xl font-bold mb-6">Users</h1>
      <Suspense fallback={<UsersSkeleton />}>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {users.map((user) => (
            <UserCard key={user.id} user={user} />
          ))}
        </div>
      </Suspense>
    </div>
  );
}

function UserCard({ user }: { user: User }) {
  return (
    <div className="p-4 border rounded-lg">
      <h2 className="font-semibold">{user.name}</h2>
      <p className="text-muted-foreground">{user.email}</p>
    </div>
  );
}
```

## Client Components Integration

```typescript
// components/user-search.tsx
"use client";

import { useState, useTransition } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Input } from "@/components/ui/input";
import { useDebounce } from "@/hooks/use-debounce";

export function UserSearch() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState(searchParams.get("q") || "");

  const debouncedSearch = useDebounce((value: string) => {
    startTransition(() => {
      const params = new URLSearchParams(searchParams);
      if (value) {
        params.set("q", value);
      } else {
        params.delete("q");
      }
      router.push(`/users?${params.toString()}`);
    });
  }, 300);

  return (
    <Input
      value={query}
      onChange={(e) => {
        setQuery(e.target.value);
        debouncedSearch(e.target.value);
      }}
      placeholder="Search users..."
      className={isPending ? "opacity-50" : ""}
    />
  );
}
```

## Server Actions

```typescript
// app/users/actions.ts
"use server";

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { z } from "zod";

const createUserSchema = z.object({
  name: z.string().min(1),
  email: z.string().email()
});

export async function createUser(prevState: any, formData: FormData) {
  const validated = createUserSchema.safeParse({
    name: formData.get("name"),
    email: formData.get("email")
  });

  if (!validated.success) {
    return { errors: validated.error.flatten().fieldErrors };
  }

  try {
    await db.insert(users).values(validated.data);
    revalidatePath("/users");
  } catch (error) {
    return { errors: { server: ["Failed to create user"] } };
  }

  redirect("/users");
}
```

## Best Practices

1. **Default to Server Components** unless interactivity needed
2. **Use "use client"** only for interactive components
3. **Fetch data in parallel** when possible
4. **Stream with Suspense** for better UX
5. **Use Server Actions** for mutations
6. **Pass serializable props** from server to client
7. **Colocate data fetching** with components

Google Antigravity helps optimize Server Component patterns for maximum performance.