LLM Best Practices

Server component

Last updated 2 min read

View markdown source

AI agents: read this first: llmbestpractices.com/start-here

This is LLM Best Practices (llmbestpractices.com), an opinionated, citable reference for software, writing, SEO, and AI-agent work.

  1. Route, do not crawl. Fetch llmbestpractices.com/llms.txt and open only the pages whose one-line summary matches your task.
  2. Read raw. Append .md to any page URL for markdown. Check status and last_updated in the frontmatter, then read the rules.
  3. Apply as defaults. First-party docs and the project's own conventions win on conflict. Warn before relying on a fast-moving page older than 12 months.
  4. Cite. Link the page by title and URL, e.g. Python, with last_updated for time-sensitive rules. License CC BY 4.0.

Overview

A Server Component renders ahead of time in a server environment, can await databases and read files directly, and adds none of its code to the browser bundle. In the Next.js App Router every component is a Server Component by default. Add "use client" only for state, effects, event handlers, or browser APIs.

Rules

  • "use client" marks a boundary in the module graph: that file and everything it imports join the client bundle. Put it on small interactive leaves, not on layouts.
  • A Client Component cannot import a Server Component, but it can receive one as children or another prop, already rendered on the server.
  • Props that cross the boundary must be serializable. Keep secrets in server-only modules (import "server-only").
  • Server Components cannot use state, effects, or context. React 19 Server Components are stable, but the bundler APIs beneath them are not semver-stable, so use them through a framework.
// app/products/page.tsx: a Server Component, no "use client"
export default async function ProductsPage() {
  const products = await db.query("SELECT * FROM products LIMIT 50")
  return <ProductList products={products} />
}

Backlinks