Server Components And The Compiler

// the server / client boundary, in code
// app/posts/[id]/page.js  (server component by default; no directive)
import { db } from '@/lib/db'                  // server-only: never bundled for the client
import { LikeButton } from './LikeButton'      // a client component: imported by reference
export default async function Page({ params }) {
  const post = await db.posts.find(params.id)   // async component; data access inline; no useEffect, no loading state here
  return <article><h1>{post.title}</h1><Markdown source={post.body} /><LikeButton postId={post.id} initialCount={post.likes} /></article>
}

// LikeButton.js
'use client'                                    // this module and everything it imports is client code
import { useState } from 'react'
export function LikeButton({ postId, initialCount }) { const [n, setN] = useState(initialCount); return <button onClick={() => { setN(n + 1); like(postId) }}>{n}</button> }

// the rules that follow from the serialisation boundary:
//   server → client props: serialisable only (JSON-ish + Date, Map, Set, typed arrays, promises, server action references, and React elements)
//   a client component cannot import a server component (there is no server at runtime on the client) but can receive one as children/props
//   server components cannot use hooks, event handlers, browser APIs; they can be async and can await anything server-side
//   "use server" marks server actions: functions callable from the client (RPC); the reference crosses the boundary, the body stays on the server
//   secrets and server-only modules: import 'server-only' makes an accidental client import a build error

// server actions: the client calls a server function by reference
// actions.js
'use server'
export async function like(postId) { await db.likes.insert({ postId, userId: await currentUser() }); revalidatePath(`/posts/${postId}`) }
// LikeButton.js ('use client'): import { like } from './actions'   → the client gets a reference { id: 'actions.js#like' }; calling it POSTs
//   the arguments (serialised) to the framework's action endpoint; the server runs the body; the response can include a fresh RSC payload
//   so the UI updates (revalidatePath re-renders the route's server components and streams the new tree)
// in a form: <form action={like}> works without JavaScript (progressive enhancement: a normal POST), and with it via fetch + useActionState (part 9)
// what to remember: an action is an endpoint. validate inputs, check auth, rate limit, exactly as you would a route handler.
// the convenience is the wiring; the security surface is the same