server actions & functions

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Updating session-derived cache with updateTag

When a Server Action changes a user's data, call updateTag() with the same tag used in cacheTag() to refresh the cached entry. For example: updateTag('notes:${userId}'). Re-read the session inside the action so it authorizes itself rather than trusting the client.

Server Action addNote example with updateTag

An example Server Action that adds a note: it re-reads the session with getSession() to authorize itself, gets the userId, validates the note input, saves it with saveNote(), then calls updateTag('notes:${userId}') to invalidate the cached entry. Re-reading the session inside the action ensures it authorizes itself rather than trusting the client.

updateTag for read-your-own-writes mutations

`updateTag()` is called from Server Actions for mutations where the user must see the result immediately (read-your-own-writes). It expires the tag so the next request waits for fresh data instead of serving stale content. It can only be called from a Server Action; calling elsewhere throws.

Replace GET Route Handler dynamic = 'force-static' with use cache

Without Cache Components, GET Route Handlers are dynamic unless `export const dynamic = 'force-static'` is set. With Cache Components, remove the config and move data access into a separate function marked with `'use cache'`. The directive cannot be applied to the GET export itself, so the handler calls a cached helper function.

Example: updateTag in Server Action

In a Server Action to show mutation result immediately: `'use server'; import { updateTag } from 'next/cache'; export async function createPost(formData: FormData) { updateTag('posts'); }`.

Example: revalidateTag with cache profile in Route Handler

In a Route Handler or webhook for stale-while-revalidate invalidation: `import { revalidateTag } from 'next/cache'; export async function POST() { revalidateTag('posts', 'max'); return Response.json({ ok: true }); }`.

Example: GET Route Handler with use cache

Before: `export const dynamic = 'force-static'; export async function GET() { const products = await db.query('SELECT * FROM products'); return Response.json(products); }`. After: `import { cacheLife } from 'next/cache'; export async function GET() { const products = await getProducts(); return Response.json(products); }; async function getProducts() { 'use cache'; cacheLife('hours'); return db.query('SELECT * FROM products'); }`.

Can I pass a Server Action directly as a prop to a Client Component?

A Server Function marked with 'use server' crosses the boundary as a reference and can be passed as a prop to a Client Component, unlike plain functions. The TypeScript plugin allows a Client Component prop typed as a function when its name is `action` or ends in `Action`.

Give your agent this brain