Server Action

Server Action: Return Object

A server-only action runs exclusively on the server when handling form submissions. It has access to databases, can perform secure mutations, and returns data to update the UI.

When to Use Server-Only Actions

  • Database writes (create, update, delete)
  • Sending emails or notifications
  • Processing payments or sensitive operations
  • Any mutation requiring server-side validation

Submit Form

Action Result

Submit the form to see the server action result

Server Action (object.ts)

import type { RouteActionArgs } from "@udibo/juniper";

import type { ServerActionData } from "./object.tsx";

export async function action(
  { request }: RouteActionArgs,
): Promise<ServerActionData> {
  const formData = await request.formData();
  const name = formData.get("name") as string;

  await new Promise((resolve) => setTimeout(resolve, 500));

  return {
    success: true,
    message: `Hello, ${name}! Your form was processed on the server.`,
    timestamp: new Date().toISOString(),
    serverProcessed: true,
  };
}

Note: The action runs only on the server, so you can safely access databases, API keys, and other server resources without exposing them to the client.