Server Function Redirects in RedwoodSDK

A demo repository showing how to implement redirects from server functions in RedwoodSDK.

The Problem

Standard HTTP redirects (302) don't work with server functions because of how React Server Components handle fetch requests. The browser blocks JavaScript from reading redirect headers for security reasons.

The Solution

This pattern returns the redirect destination as data, which a custom transport intercepts and handles automatically.

Quick Start

1. Set up the client (one-time)

// src/client.tsx
import {
  initClient,
  initClientNavigation,
  navigate,
  fetchTransport,
} from "rwsdk/client";

const { handleResponse } = initClientNavigation();

const redirectTransport = (
  transportContext: Parameters<typeof fetchTransport>[0]
) => {
  const callServer = fetchTransport(transportContext);

  return async (id: string, args: unknown) => {
    const result = await callServer(id, args);

    if (result?.redirectTo) {
      navigate(result.redirectTo);
      return undefined;
    }

    return result;
  };
};

initClient({ transport: redirectTransport, handleResponse });

2. Create a redirect helper (optional but recommended)

// src/app/redirect.ts
export function redirect(path: string) {
  return { redirectTo: path };
}

3. Use it in any server function

"use server";

import { redirect } from "@/app/redirect";

export async function submitForm(_prevState: unknown, formData: FormData) {
  // Do your thing...

  return redirect("/success");
}

That's it. The user will be redirected to /success.

Examples in This Demo

This demo shows several common redirect patterns:

1. Basic Redirect - Simple redirect after a successful action
2. Error Redirect - Redirect to an error page when something goes wrong
3. Conditional Redirect - Redirect to different pages based on logic

Running the Demo

pnpm install
pnpm dev

Further Reading

• RedwoodSDK Documentation