React Server Components Explained

npx create-next-app@latest my-rsc-app \
  --typescript \
  --tailwind \
  --app \
  --src-dir

cd my-rsc-app
npm run dev

app/
├── layout.tsx          # Root layout (Server Component)
├── page.tsx            # Home page (Server Component)
├── globals.css
├── products/
│   ├── page.tsx        # /products route (Server Component)
│   └── [id]/
│       └── page.tsx    # /products/[id] (Server Component)
├── dashboard/
│   ├── layout.tsx      # Dashboard layout with auth
│   └── page.tsx        # Dashboard page
components/
├── ProductCard.tsx     # Server Component (no directive)
├── CartButton.tsx      # Client Component ('use client')
├── SearchBar.tsx       # Client Component (needs input events)
└── Header.tsx          # Server Component (static nav)
lib/
├── database.ts         # Prisma / DB client
└── data.ts             # Cached data-fetching functions

import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const db =
  globalForPrisma.prisma ??
  new PrismaClient({
    log: ['query'],
  })

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db

// Usage in any Server Component:
// import { db } from '@/lib/database'
// const users = await db.user.findMany()

'use server'  // Marks this module as server-only

import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'
import { db } from '@/lib/database'
import { z } from 'zod'

const CreateProductSchema = z.object({
  name: z.string().min(1).max(200),
  price: z.coerce.number().positive(),
  description: z.string().min(10),
})

export async function createProduct(formData: FormData) {
  const parsed = CreateProductSchema.safeParse({
    name: formData.get('name'),
    price: formData.get('price'),
    description: formData.get('description'),
  })

  if (!parsed.success) {
    return { error: parsed.error.flatten() }
  }

  const product = await db.product.create({
    data: parsed.data,
  })

  // Invalidate the products page cache
  revalidatePath('/products')

  // Redirect to the new product
  redirect(`/products/${product.id}`)
}

// Traditional React (client-side) — marked ships to browser
'use client'
import { marked } from 'marked'   // ~30KB in your JS bundle
import { useEffect, useState } from 'react'

export function BlogPost({ mdContent }: { mdContent: string }) {
  const [html, setHtml] = useState('')

  useEffect(() => {
    setHtml(marked(mdContent))
  }, [mdContent])

  return <article dangerouslySetInnerHTML={{ __html: html }} />
}

// Server Component — NO 'use client' directive
import { marked } from 'marked'   // runs on server, never bundled
import DOMPurify from 'isomorphic-dompurify'

export async function BlogPost({ slug }: { slug: string }) {
  // Fetch from DB on the server
  const post = await db.post.findUnique({ where: { slug } })

  const rawHtml = marked(post.content)
  const safeHtml = DOMPurify.sanitize(rawHtml)

  return (
    <article
      className="prose"
      dangerouslySetInnerHTML={{ __html: safeHtml }}
    />
  )
}

// marked (~30KB) + DOMPurify (~25KB) = 55KB saved from your bundle.

// ✅ VALID — these can be serialized
<ClientComponent
  id="abc-123"
  count={42}
  product={{ name: 'Widget', price: 9.99 }}
  tags={['electronics', 'sale']}
  createdAt={new Date().toISOString()}  // Dates as strings ✓
/>

// ❌ INVALID — these cannot be serialized
<ClientComponent
  fn={myFunction}         // Functions can't be serialized
  mapObj={new Map()}      // Map instances can't be serialized
  setObj={new Set()}      // Set instances can't be serialized
  date={new Date()}       // Date objects can't be serialized
  classInstance={new MyClass()}  // Class instances can't be serialized
/>

// ✅ Pass functions via Server Actions instead
import { myServerAction } from './actions'
<ClientComponent action={myServerAction} />
// Server Actions ARE serializable — they're RPC references

// components/Modal.tsx — Client Component (needs useState)
'use client'
import { useState } from 'react'

export function Modal({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && (
        <div className="modal-overlay" onClick={() => setOpen(false)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            {children}  {/* ← Server-rendered content goes here */}
          </div>
        </div>
      )}
    </>
  )
}

// app/page.tsx — Server Component uses Modal with server-fetched content
import { Modal } from '@/components/Modal'
import { UserDetails } from '@/components/UserDetails'  // Server Component

export default async function Page() {
  const user = await db.user.findUnique({ where: { id: '123' } })

  return (
    <Modal>
      {/* This is a Server Component passed as children */}
      <UserDetails user={user} />
    </Modal>
  )
}

// Modal is a Client Component, but its children (UserDetails)
// are still server-rendered. Best of both worlds.