# Remix & React Router v7 Email Architecture: Server Actions and Loaders

_By Tayyab Mughal, Founder & AI Chief · 24 July 2026 · 2 min read_

> How to architect transactional email flows in Remix and React Router v7 using action functions, Zod validation, and scoped API keys.

Learn how to handle transactional email sending, contact form submissions, and password resets in Remix and React Router v7 with progressive enhancement.

## Progressive Enhancement and Form Actions

In React Router v7 and Remix, form submissions are handled on the server via action functions. This guarantees that email submissions succeed even if client-side JavaScript has not loaded or has been blocked by ad blockers.

## Implementing the Action Handler (routes/contact.tsx)

Validate incoming FormData with Zod, dispatch the email asynchronously, and return structured JSON responses to the UI.

```typescript
import type { ActionFunctionArgs } from '@remix-run/node';
import { json } from '@remix-run/node';
import { z } from 'zod';

const ContactSchema = z.object({
  email: z.string().email(),
  name: z.string().min(2),
  message: z.string().min(10),
});

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const parsed = ContactSchema.safeParse(Object.fromEntries(formData));

  if (!parsed.success) {
    return json({ errors: parsed.error.flatten().fieldErrors }, { status: 400 });
  }

  const { email, name, message } = parsed.data;

  const res = await fetch('https://api.sadasend.com/v1/emails', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.SADASEND_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      to: 'support@sadasend.com',
      replyTo: email,
      subject: `Contact Inquiry from ${name}`,
      text: `From: ${name} (${email})\n\nMessage:\n${message}`,
    }),
  });

  if (!res.ok) {
    return json({ error: 'Delivery network temporarily unavailable' }, { status: 502 });
  }

  return json({ success: true });
}
```

## Key architectural benefits

- Zero client bundle bloat: Email validation and API credentials remain 100% server-side.
- Built-in CSRF protection: Remix actions handle request origins automatically.
- Instant client revalidation: The UI updates smoothly without full page reloads.

---

_Tags: Remix, React Router, TypeScript, WebDev_