What is Action in Remix: Explained with Examples

action in Remix is a server-side function that handles POST, PUT, DELETE, or other non-GET HTTP requests for a route. It processes form submissions or API calls and returns data or redirects. This lets you handle user input securely on the server.

How It Works

Think of action in Remix like a waiter in a restaurant who takes your order (form data) and brings back your food (response). When a user submits a form or sends data to the server, Remix calls the action function for that route to process the request.

This function runs only on the server, so it can safely handle sensitive tasks like saving data to a database or validating input. After processing, it can send back a response or redirect the user to another page.

Unlike client-side JavaScript, action runs securely on the server, making it perfect for handling changes or updates triggered by user actions.

Example

This example shows a simple form that submits a username. The action function receives the form data, logs it, and redirects the user to a thank-you page.

jsx

import { redirect } from "@remix-run/node";

export async function action({ request }) {
  const formData = await request.formData();
  const username = formData.get("username");

  console.log("Received username:", username);

  // Here you could save the username to a database

  return redirect("/thank-you");
}

export default function UsernameForm() {
  return (
    <form method="post">
      <label htmlFor="username">Username:</label>
      <input id="username" name="username" type="text" required />
      <button type="submit">Submit</button>
    </form>
  );
}

Output

A form with a text input labeled 'Username' and a submit button. On submit, the server logs the username and redirects to '/thank-you'.

When to Use

Use action in Remix whenever you need to handle data sent from the client that changes something on the server. Common cases include:

• Processing form submissions like login, signup, or contact forms
• Saving or updating data in a database
• Deleting or modifying resources
• Handling API requests that change server state

It is best for any user interaction that requires secure, server-side processing before responding or redirecting.

Key Points

• action handles non-GET HTTP requests in Remix routes.
• It runs only on the server for secure data processing.
• Commonly used for form submissions and data changes.
• Returns responses or redirects after processing.
• Works with fetch or HTML forms using method="post".

Key Takeaways

action handles server-side processing of POST and other non-GET requests in Remix.

Use action to securely process form data or API calls that change server data.

action runs only on the server and can return redirects or data responses.

It is essential for handling user input that affects backend state in Remix apps.