第 12 讲｜Server Actions、Form 与 mutation

  encryptionKey: string
}

const PLUGIN_NAME = 'FlightClientEntryPlugin'

type Actions = {
  [actionId: string]: {
    exportedName?: string
    filename?: string
    workers: {
      [name: string]: {
        moduleId: string | number
        async: boolean
      }
    }
    // Record which layer the action is in (rsc or sc_action), in the specific entry
    //
    // This is only used by Webpack to correctly output the manifest. It's value shouldn't be relied
    // upon externally. It's possible that the same action can be in different layers in a single
    // page, which cannot be modelled with this API anyway.
    layer?: {
      [name: string]: string
    }
  }
}

type ActionIdNamePair = {
  id: string
  exportedName?: string
  filename?: string
}

export type ActionManifest = {
  // Assign a unique encryption key during production build.
  encryptionKey: string
  node: Actions
  edge: Actions
}

{
  "encryptionKey": "base64-encoded-key",
  "node": {
    "1234567890abcdef": {
      "workers": { "app/products/page": { "moduleId": "...", "async": true } },
      "filename": "app/products/actions.ts",
      "exportedName": "createProduct"
    }
  },
  "edge": {}
}

用户点击按钮
    ↓
React 把 action 函数当 ref 调用
    ↓
RSC client runtime 把 args 序列化为 FormData / payload
    ↓
带 actionId 头 (next-action) POST 到当前 URL
    ↓
路由层识别 ACTION_HEADER
    ↓
handleAction 解码 actionId，找到对应 module
    ↓
执行函数，把返回值包成 RSC payload
    ↓
返回给客户端
    ↓
client-router 接收到 server-action / server-patch action
    ↓
更新 segment cache / 触发 re-render

export async function handleAction({
  req,
  res,
  ComponentMod,
  generateFlight,
  workStore,

            const formData = await req.request.formData()
            if (isFetchAction) {
              // A fetch action with a multipart body.

              try {
                actionModId = getActionModIdOrError(actionId, serverModuleMap)
              // ...
                formData,
                serverModuleMap,
                { temporaryReferences }
              )
            } else {
              // Multipart POST, but not a fetch action.
              // ...
              if (areAllActionIdsValid(formData, serverModuleMap) === false) {
                // TODO: This can be from skew or manipulated input. We should handle this case
                // more gracefully but this preserves the prior behavior where decodeAction would throw instead.
                throw new Error(
                  `Failed to find Server Action. This request might be from an older or newer deployment.\nRead more: https://nextjs.org/docs/messages/failed-to-find-server-action`
                )
              }

              const action = await decodeAction(formData, serverModuleMap)

              if (areAllActionIdsValid(formData, serverModuleMap) === false) {
                // TODO: This can be from skew or manipulated input. We should handle this case
                // more gracefully but this preserves the prior behavior where decodeAction would throw instead.
                throw new Error(
                  `Failed to find Server Action. This request might be from an older or newer deployment.\nRead more: https://nextjs.org/docs/messages/failed-to-find-server-action`
                )
              }

async function ProductPage({ id }: { id: string }) {
  async function deleteThis() {
    "use server";
    await db.product.delete({ where: { id } }); // 引用了上层 id
    revalidatePath("/products");
  }
  return <DeleteButton action={deleteThis} />;
}

async function decodeActionBoundArg(actionId: string, arg: string) {
  const key = await getActionEncryptionKey()
  if (typeof key === 'undefined') {
    throw new Error(
      `Missing encryption key for Server Action. This is a bug in Next.js`
    )
  }

  // Get the iv (16 bytes) and the payload from the arg.
  const originalPayload = atob(arg)
  const ivValue = originalPayload.slice(0, 16)
  const payload = originalPayload.slice(16)

  const decrypted = textDecoder.decode(
    await decrypt(key, stringToUint8Array(ivValue), stringToUint8Array(payload))
  )

  if (!decrypted.startsWith(actionId)) {
    throw new Error('Invalid Server Action payload: failed to decrypt.')
  }

  return decrypted.slice(actionId.length)
}

async function deleteThis(otherUserId: string) {
  "use server";
  // 攻击者篡改 otherUserId 删别人的数据
}

const INLINE_ACTION_PREFIX = '$$RSC_SERVER_ACTION_'

async function createProduct(formData: FormData) {
  "use server";
  const title = formData.get("title") as string;
  await db.product.create({ data: { title } });
  revalidatePath("/products");
}

export function CreateProductForm() {
  return (
    <form action={createProduct}>
      <input name="title" />
      <button type="submit">Create</button>
    </form>
  );
}

"use client";
import { useTransition } from "react";

export function DeleteButton({
  id,
  action,
}: {
  id: string;
  action: (id: string) => Promise<void>;
}) {
  const [pending, start] = useTransition();
  return (
    <button
      disabled={pending}
      onClick={() =>
        start(async () => {
          await action(id);
        })
      }
    >
      {pending ? "deleting..." : "Delete"}
    </button>
  );
}

"use client";
import { useFormStatus } from "react-dom";

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending}>{pending ? "submitting..." : "Submit"}</button>
  );
}

export function CreateForm() {
  return (
    <form action={createProduct}>
      <input name="title" />
      <SubmitButton />
    </form>
  );
}

"use client";
import { useActionState } from "react";

async function login(prev: { error?: string } | null, formData: FormData) {
  "use server";
  const ok = await checkCredentials(formData);
  if (!ok) return { error: "invalid credentials" };
  redirect("/dashboard");
}

export function LoginForm() {
  const [state, formAction] = useActionState(login, null);
  return (
    <form action={formAction}>
      <input name="email" />
      <input name="password" type="password" />
      <button type="submit">Login</button>
      {state?.error && <p>{state.error}</p>}
    </form>
  );
}

import { revalidatePath, revalidateTag } from "next/cache";

async function deleteProduct(id: string) {
  "use server";
  await db.product.delete({ where: { id } });
  revalidatePath("/products"); // 失效列表页
  revalidateTag(`product:${id}`); // 失效详情 tag
}

import { redirect } from "next/navigation";

async function checkout(formData: FormData) {
  "use server";
  const orderId = await createOrder(formData);
  redirect(`/orders/${orderId}`);
}

async function createProduct(formData: FormData) {
  "use server";
  const id = await db.product.create({ data: parse(formData) });
  revalidateTag("product:list");
  redirect(`/products/${id}`);
}

// app/products/actions.ts
"use server";

import { revalidatePath, revalidateTag } from "next/cache";
import { redirect } from "next/navigation";
import { z } from "zod";

const Product = z.object({
  title: z.string().min(1),
  price: z.coerce.number().int().positive(),
});

export async function createProduct(formData: FormData) {
  const parsed = Product.safeParse({
    title: formData.get("title"),
    price: formData.get("price"),
  });
  if (!parsed.success) {
    return { error: parsed.error.flatten().fieldErrors };
  }
  const id = await db.product.create({ data: parsed.data });
  revalidateTag("product:list");
  redirect(`/products/${id}`);
}

export async function updateProduct(id: string, formData: FormData) {
  const parsed = Product.safeParse({
    title: formData.get("title"),
    price: formData.get("price"),
  });
  if (!parsed.success) return { error: parsed.error.flatten().fieldErrors };
  await db.product.update({ where: { id }, data: parsed.data });
  revalidateTag(`product:${id}`);
  revalidateTag("product:list");
}

export async function deleteProduct(id: string) {
  await db.product.delete({ where: { id } });
  revalidateTag(`product:${id}`);
  revalidateTag("product:list");
  redirect("/products");
}

// app/products/page.tsx
import Link from "next/link";
import { createProduct } from "./actions";

export default async function ProductList() {
  const products = await db.product.findMany();
  return (
    <div>
      <ul>
        {products.map((p) => (
          <li key={p.id}>
            <Link href={`/products/${p.id}`}>
              {p.title} - ${p.price}
            </Link>
          </li>
        ))}
      </ul>
      <h3>New product</h3>
      <form action={createProduct}>
        <input name="title" placeholder="Title" />
        <input name="price" placeholder="Price" type="number" />
        <button type="submit">Create</button>
      </form>
    </div>
  );
}

// app/products/[id]/page.tsx
import { updateProduct, deleteProduct } from "../actions";

export default async function ProductDetail({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await db.product.findUnique({ where: { id } });
  if (!product) return <p>not found</p>;

  const update = updateProduct.bind(null, id);
  const remove = deleteProduct.bind(null, id);

  return (
    <div>
      <form action={update}>
        <input name="title" defaultValue={product.title} />
        <input name="price" defaultValue={product.price} type="number" />
        <button type="submit">Save</button>
      </form>
      <form action={remove}>
        <button type="submit">Delete</button>
      </form>
    </div>
  );
}

function syncAction() {
  // ← 编译报错
  "use server";
  return "hello";
}

"use client";

export function DraftForm() {
  const [draft, setDraft] = useState("");

  async function save(formData: FormData) {
    "use server"; // ← 编译错误：不能在 client component 内定义
  }
}

cd learning/nextjs-40-lectures/fixtures/lecture-12
pnpm install --ignore-workspace
pnpm dev
# 浏览器打开 http://localhost:3012/