[RSC Framework Mode] Server Functions Cookie Setting Issue

[femioladipo]

Reproduction

https://stackblitz.com/edit/github-mu2rn18z?file=app%2Froutes%2Fhome.tsx

File Structure:

app/routes/_index/
├── action.ts
└── route.tsx

Files:

// app/routes/_index/action.ts
"use server";

import { data } from "react-router";

export async function updateCountModule() {
  console.log("updateCountModule");
  
  return data("", {
    headers: [
      ['Set-Cookie', 'count=1'],
    ]
  });
}

// app/routes/_index/route.tsx
import { data } from "react-router";
import type { Route } from "./+types/route";
import { updateCountModule } from "./action";

export function loader() {
  return data({
    data: {
      message: "Hello, Message!",
    },
  });
}

export async function updateCountFunction() {
  "use server";
  console.log("updateCountFunction");
  
  return data("", {
    headers: [
      ['Set-Cookie', 'count=2'],
    ]
  });
}

export function ServerComponent({loaderData}: Route.ComponentProps) {
  return (
    <div>
      <p>{loaderData.data.message}</p>
      <button onClick={updateCountModule}>Update Count Module</button>
      <button onClick={updateCountFunction}>Update Count Function</button>
    </div>
  );
}

Steps:

1. Create the files above with the exact structure
2. Run the app and click both buttons
3. Check browser cookies

System Info

System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 76.27 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.3.0 - ~/.nvm/versions/node/v23.3.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v23.3.0/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v23.3.0/bin/npm
    pnpm: 10.11.0 - ~/Library/pnpm/pnpm
  Browsers:
    Safari: 18.1.1
  npmPackages:
    @react-router/dev: 0.0.0-experimental-4b4fa8f64 => 0.0.0-experimental-4b4fa8f64 
    @react-router/fs-routes: 0.0.0-experimental-4b4fa8f64 => 0.0.0-experimental-4b4fa8f64 
    @react-router/serve: 0.0.0-experimental-4b4fa8f64 => 0.0.0-experimental-4b4fa8f64 
    react-router: 0.0.0-experimental-4b4fa8f64 => 0.0.0-experimental-4b4fa8f64

Used Package Manager

pnpm

Expected Behavior

Cookie Setting: Both server functions would Ideally set cookies on the client via the Set-Cookie headers in the data() return value, or another method.

Actual Behavior

Cookie Setting: Neither server function sets cookies on the client, despite the Set-Cookie headers in the return values

Current Limitation: React Router's route action and loader functions support setting cookies and headers through their return values (e.g., return redirect('/path', { headers: { 'Set-Cookie': 'value' } })). However, server functions called from components don't have equivalent capability - their returned data() with headers doesn't actually set cookies or modify response headers. For server functions to be true equivalents to route functions, they need a way to update headers and cookies, enabling component-triggered actions that can both update state and manage session data simultaneously.

[github-actions]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. This should help us to focus on actionable issues and be more responsive to newly filed issues.

To get this re-opened, please add a reproduction to the Issue description and tag @brophdawg11 or @brookslybrand in a comment so we can re-open.

Or, if this was closed by mistake and there is a valid reproduction, please ensure that it is linked in the Issue description and and tag @brophdawg11 or @brookslybrand in a comment so we can re-open.

If you have any questions, you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!

[brookslybrand]

@femioladipo you can create a reproduction on StackBlitz using this link:

http://stackblitz.com/github/remix-run/react-router-templates/tree/main/unstable_rsc-framework-mode

[femioladipo]

Hi @brookslybrand, thanks for the link I wasn't sure how to use the experimental stuff on stack blitz.

Anyway here's the reproduction: https://stackblitz.com/edit/github-mu2rn18z?file=app%2Froutes%2Fhome.tsx

Is it possible to re-open this issue?

[femioladipo]

Hi, inline "use server" now works. The only thing that I've noticed changing it updating from:
"react-router": "0.0.0-experimental-4b4fa8f64"
"@react-router/dev": "0.0.0-experimental-4b4fa8f64"
"@react-router/fs-routes": "0.0.0-experimental-4b4fa8f64"
to:
"react-router": "7.9.2"
"@react-router/dev": "7.9.2"
"@react-router/fs-routes": "7.9.2"

So we can consider that point mute now. Just the cookie issue stands.

[rossipedia]

So that's not going to work the way you expect. React server functions aren't loaders/actions and don't work the same way, so you can't return a DataWithResponseInit and expect it to update the loader data for the page. They're a completely separate communication mechanism.

In order to set anything on the response during a server function, you need to treat it as a side effect, which means:

• Tracking the current request/context. This is probably most easily done with the ContextStorageMiddleware from remix-utils and putting that middleware on the root route
• Providing a facility for tracking headers to be appended. This can also be done with a root middleware and context, for example:

import type { MiddlewareFunction } from 'react-router';
import { createContext } from 'react-router';

// This module is basically just the `createContextStorageMiddleware` from `remix-utils`
import { getContext } from './context-storage';

export const responseHeadersContext = createContext<Headers>();

export const responseHeadersMiddleware: MiddlewareFunction<Response> = async (
  { context },
  next,
) => {
  const headers = new Headers();
  context.set(responseHeadersContext, headers);
  const response = await next();
  for (const [key, value] of headers) {
    response.headers.append(key, value);
  }
};

export function appendResponseHeader(key: string, value: string) {
  const context = getContext();
  const headers = context.get(responseHeadersContext);
  if (!headers) {
    throw new Error(
      'appendResponseHeader must be called within a request context',
    );
  }
  headers.append(key, value);
}

The other thing, is that when you declare server functions at module scope in a route, you don't want to export them. Or else they will be included in the client bundle and you'll get build errors if they call anything exported by a "use server" or import "server-only" module.

So in your example:

- export async function updateCountFunction() {
+ async function updateCountFunction() {

Or you can just inline it in the action attribute directly.

I whipped up a small POC to demonstrate:

https://stackblitz.com/~/github/rossipedia/rr-rsc-server-functions

•edit• StackBlitz seems to have some issues with RSC and root middleware atm, probably better to pull the repo down directly:

https://github.com/rossipedia/rr-rsc-server-functions

[femioladipo]

Thanks that was fast, and solves that.

I also had the issue of accessing cookies in server functions, but from your stack blitz similarly I can access that from within the context stored in local storage too.

I do think a note on how to achieve this in the docs would be very helpful. It’ll be quite common that people want to access headers and or set headers (or cookies) in server functions.

Also thanks for the note on the export, that was actually a typo from when I copied the function from the “module’”. But the explanation on the potential error is good to know.