การเพิ่มประสิทธิภาพแบบก้าวหน้าด้วยพร็อพ Action ของฟอร์ม

Progressive enhancement means a form works using plain HTML first, then gets better once JavaScript loads and React hydrates.

In Next.js 15 App Router, you achieve this by passing a Server Action directly to a form's action prop. The browser can submit the form natively to the server before any client JS arrives.

• No JS yet? The form still posts and the server responds.
• JS hydrated? React intercepts the submit and uses fetch under the hood, avoiding a full page reload.

A Server Action is an async function marked with the 'use server' directive. It runs only on the server.

When passed to <form action={...}>, Next.js wires it up so the form's fields arrive as FormData.

Pass the Server Action straight into the action prop. Because this is real HTML, each input needs a name attribute so it shows up in FormData.

This component can be a Server Component — no 'use client' needed for the basic case.

Native form submission serializes inputs by their name. Next.js builds the FormData object from those names — both when JS is off (native POST) and when it is on (intercepted fetch).

• formData.get('title') reads the input named title.
• An input without a name is invisible to the server.
• This is the same contract as classic HTML forms, which is exactly why it degrades gracefully.

Disable JavaScript in your browser and submit the form. It still works.

Here is what happens on that path:

• The browser performs a standard HTTP POST to the current route.
• Next.js runs your Server Action on the server with the submitted FormData.
• If the action calls redirect() or revalidatePath(), the server responds with the updated page.

This is the baseline that progressive enhancement guarantees.

After a successful mutation you usually want to refresh cached data and navigate. Both work on the no-JS path and the hydrated path.

• revalidatePath('/posts') tells Next.js to refetch that route's data.
• redirect('/posts') sends the user to the new location.

Never trust client input. Validate inside the Server Action so the rules apply even when JavaScript is disabled.

A clean approach is to parse FormData with a schema and return a typed result the form can display.

Once hydrated, you can show pending UI. The useFormStatus hook reports whether the parent form is submitting.

It must be called from a child component of the form, inside a Client Component. When JS is off, this code simply doesn't run, and the plain button is what the user sees.

To surface validation errors and success messages, wrap the action with useActionState (React 19 / Next.js 15). It threads the action's return value back into your component as state.

The form still works without JS: the same action runs on a native POST, just without the in-place state update.

When you use useActionState, the Server Action gains an extra first argument: the previous state. The signature changes from (formData) to (prevState, formData).

Keep the return shape consistent so the initial state and every result line up.

Progressive enhancement only holds if you avoid breaking the native path. Watch out for:

• Relying on onClick or onChange handlers for required behavior — those need JS.
• Submitting without a type="submit" button.
• Reading values from React state instead of FormData in the action.

Rule of thumb: the action and inputs carry the contract; client hooks only enhance it. Test by disabling JS at least once.

You learned how to build progressively enhanced forms in Next.js 15:

• Pass a Server Action to <form action={...}> so it works via native POST before hydration.
• Give every input a name — that is the contract that feeds FormData on both paths.
• Validate on the server so rules apply even with JS disabled.
• Use redirect and revalidatePath to update the UI after a mutation.
• Enhance with useFormStatus (pending UI) and useActionState (returned state), remembering the action signature becomes (prevState, formData).
• Keep required behavior in the action and inputs, not in client-only handlers, and test with JavaScript off.