Server Components

1// ---- Too high: the whole page becomes client code -------------------
2'use client'
3import { highlight } from 'heavy-syntax-highlighter'  // ~ships to everyone
4 
5export default function ArticlePage({ post, comments }) {
6  const [liked, setLiked] = useState(false)   // the only reason this is
7  return (                                     // a client component at all
8    <article>
9      <h1>{post.title}</h1>
10      <div dangerouslySetInnerHTML={{ __html: highlight(post.body) }} />
11      <button onClick={() => setLiked(!liked)}>Like</button>
12      <Comments items={comments} />
13    </article>
14  )
15}
16 
17// ---- Boundary pushed down to the one interactive leaf ----------------
18// server component: no directive, never shipped, may read data directly
19import { highlight } from 'heavy-syntax-highlighter'  // stays on the server
20 
21export default async function ArticlePage({ id }) {
22  const post = await db.posts.find(id)          // direct read, no endpoint
23  return (
24    <article>
25      <h1>{post.title}</h1>
26      <div dangerouslySetInnerHTML={{ __html: highlight(post.body) }} />
27 
28      {/* serializable props only: numbers, strings, plain objects */}
29      <LikeButton postId={post.id} initialCount={post.likes} />
30 
31      {/* rendered output passed as children — Comments never ships */}
32      <CollapsiblePanel label="Comments">
33        <Comments items={await db.comments.forPost(id)} />
34      </CollapsiblePanel>
35    </article>
36  )
37}
38 
39// LikeButton.tsx
40'use client'
41export function LikeButton({ postId, initialCount }) { /* ~this ships */ }
42 
43// What cannot cross the boundary, and why it is not arbitrary:
44//   onSave={fn}          a function has no wire representation
45//   client={dbHandle}    a live connection cannot be serialized
46//   user={userRecord}    it can be serialized, and then it is public

The third comment at the bottom is the security one. user={userRecord} is not rejected by anything: it serializes cleanly, the page renders, and every field of that record is now in the response body for anyone to read. Serializable and safe to send are different questions, and only the first one is enforced.