React

Server Components Commands

Use React Server Components and Server Actions for full-stack React. Fetch data on the server, reduce client-side JavaScript, and handle form submissions without API routes.

6 commands

Pro Tips

Server Components are the default in Next.js App Router. Only add 'use client' when you need hooks or browser APIs.

Use Server Actions with 'use server' for form handling — they run on the server with full database access.

Pass Server Components as children to Client Components to keep most of your app server-rendered.

Common Mistakes

Server Components cannot use useState, useEffect, or any hooks. Move interactive logic to Client Components.

Props passed from Server to Client Components must be serializable. No functions, Dates, or class instances.

Commands

Mark Server Action

$ 'use server'

Directive to mark async functions as Server Actions (top of file or function).

Mark Client Component

$ 'use client'

Directive to mark component as Client Component (required for hooks, events).

Force dynamic rendering

$ export const dynamic = 'force-dynamic'

Force page to render dynamically on every request (disable static optimization).

ISR revalidation interval

$ export const revalidate = 60

Set Incremental Static Regeneration interval in seconds (ISR).

Set cookies in Server Component

$ cookies().set('name', 'value')

Set HTTP cookies in Server Components or Server Actions.

Access headers in Server Component

$ headers().get('user-agent')

Read request headers in Server Components or Server Actions.