Server Action

Server Action: Return Response

Server actions can return a custom Response object for complete control over status codes, headers, and response format. This is useful for API-like responses or custom error handling.

When to Use Custom Response

  • Setting specific HTTP status codes (201 Created, 422 Validation Error)
  • Adding custom headers (correlation IDs, timing info)
  • Returning non-JSON formats (XML, CSV downloads)
  • Implementing API-like error responses

Submit Data

Response Details

Submit the form to see the custom response

Server Action with Custom Response (response.ts)

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

import type { ResponseActionData } from "./response.tsx";

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

  const responseData: ResponseActionData = {
    success: true,
    message: `Processed: ${input}`,
    processedAt: new Date().toISOString(),
  };

  const headers = new Headers({
    "Content-Type": "application/json",
    "Cache-Control": "no-store",
    "X-Action-Id": crypto.randomUUID(),
  });

  return new Response(JSON.stringify(responseData), { status: 200, headers });
}

Note: Check your browser's Network tab to see the custom headers attached to the response. The X-Action-Id header can be useful for request tracing and debugging.