Server Components — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— Server Components
📋Server
⚙️Client
🔄Compose
✅Boundary
🎯 Next: Test →
Step 1 / 4
Speed
Server Components
Server Components run on server — direct DB/secret access💡 Analogy
Like a waiter who goes to the kitchen for your order — you just get your plate, not access to the kitchen.
Server Components run only on the server — they can query databases directly, use secret env vars, and access backend services without sending any of that logic to the browser.
Console Output
> ProductsPage rendered on server
> db.query: 20 rows
> Client bundle: 0 KB added
> Streaming HTML to browser...
●server-components.tsx
Server ComponentsL3–16
1// Server Component — runs only on server, no JS sent to client
2// No useState, useEffect, event handlers allowed
3 
4// products/page.tsx — Server Component
5async function ProductsPage() {
6  // Direct DB access — no API layer needed!
7  const products = await db.query('SELECT * FROM products LIMIT 20');
8  // Secret env vars available — not leaked to client
9  const featured = await redis.get('featured:products');
10 
11  return (
12    <main>
13      <h1>Products</h1>
14      // Cannot use onClick here — no client JS
15      <ProductList products={products} featured={JSON.parse(featured ?? '[]')} />
16      // Client components accepted as children
17      <AddToCartButton />
18    </main>
19  );
20}
21 
22// AddToCartButton.tsx — Client Component (has interactivity)
23'use client';
24import { useState } from 'react';
25 
26function AddToCartButton({ productId }: { productId: string }) {
27  const [loading, setLoading] = useState(false);
28 
29  async function handleClick() {
30    setLoading(true);
31    await fetch(`/api/cart`, {
32      method: 'POST',
33      body: JSON.stringify({ productId }),
34    });
35    setLoading(false);
36  }
37 
38  return (
39    <button onClick={handleClick} disabled={loading}>
40      {loading ? 'Adding...' : 'Add to Cart'}
41    </button>
42  );
43}
44 
45// Composition: Server passes data to Client as props
46async function ProductCard({ id }: { id: string }) {
47  const product = await db.getProduct(id);          // Server: DB access
48  return (
49    <div>
50      <h2>{product.name}</h2>
51      <AddToCartButton productId={product.id} />    // Client: interactivity
52    </div>
53  );
54}
55 
56declare const db: any;
57declare const redis: any;
58declare const ProductList: any;
58 lines
Timeline — 4 Steps
Server Components
Server Components run on server — direct DB/secret access💡 Analogy
Like a waiter who goes to the kitchen for your order — you just get your plate, not access to the kitchen.
Server Components run only on the server — they can query databases directly, use secret env vars, and access backend services without sending any of that logic to the browser.
Console Output
> ProductsPage rendered on server
> db.query: 20 rows
> Client bundle: 0 KB added
> Streaming HTML to browser...

Was this page helpful?

Discussion

Server Components run on server — direct DB/secret access

💡 Analogy

Like a waiter who goes to the kitchen for your order — you just get your plate, not access to the kitchen.

Server Components run only on the server — they can query databases directly, use secret env vars, and access backend services without sending any of that logic to the browser.

Console Output

> ProductsPage rendered on server
> db.query: 20 rows
> Client bundle: 0 KB added
> Streaming HTML to browser...

Server Components run on server — direct DB/secret access

💡 Analogy

Like a waiter who goes to the kitchen for your order — you just get your plate, not access to the kitchen.

Server Components run only on the server — they can query databases directly, use secret env vars, and access backend services without sending any of that logic to the browser.

Console Output

> ProductsPage rendered on server
> db.query: 20 rows
> Client bundle: 0 KB added
> Streaming HTML to browser...