"Connection closed" error when using redirect from a server action to a page with client components

[nickw1]

Describe the bug

Hi,

I'm encountering problems when I use redirect() inside a server action, to a server component which itself contains a client component.

I have prepared a minimal working example at: https://github.com/nickw1/rs-minimal-1

As you can see, there is an app component which, depending on the session state, renders either a Logout component or a Login component plus a NewUser component.

All are server components except the NewUser component.

Login and Logout contain forms connected to server actions which either set, or unset, a session (using iron-session) though the session handling appears to be unrelated to the problem. Each server action redirects to the root when the session handling is completed.

What should happen is, on first visit the user sees a "Login" button and the message "A client component". The latter is the output from the NewUser component.

When they click "login", the "logout" button should appear (only). When the user then clicks "logout", it reverts to the "Login" button and the message "A client component" being rendered.

This works as expected if NewUser is not rendered, you can login and logout and all works as expected.

However if NewUser (the only client component) is rendered, when I click "Login", I get a "Connection closed" error. When I then reload the page, it does display "Logout" as expected.

Apologies if this is not a bug but to my understanding, this example should work as expected.

Thanks!

Reproduction

No response

Steps to reproduce

Standard steps:
git clone https://github.com/nickw1/rs-minimal-1
pnpm i
pnpm exec react-server
Navigate to http://localhost:3000
Click "login"
Connection closed error occurs.

System Info

System:
    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-1340P
    Memory: 27.48 GB / 31.05 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.10.0 - /usr/local/node/bin/node
    npm: 10.2.3 - /usr/local/node/bin/npm
    pnpm: 9.12.3 - /usr/local/node/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.69
  npmPackages:
    @lazarv/react-server: 0.0.0-experimental-d09c5f5-20250114-70d4f6d7 => 0.0.0-experimental-d09c5f5-20250114-70d4f6d7

(In fact I am testing on Firefox despite the output above)

Used Package Manager

pnpm

Logs

No log text appears.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[lazarv]

Hi @nickw1,

sadly there are some issues regarding using redirect in server functions. redirect works right now only when using no client components and so only SSR is used without client-side hydration.

Your reproduction example was really helpful in identifying issues, so thanks for preparing this for investigation!

I would like to point out some parts that need to be addressed in user-land instead of on the framework side.

Adding iron-session to resolve.external:

{
  "resolve": {
    "external": ["iron-session"]
  }
}

I might need some further investigation why this package was included as part of the production bundles, but without the configuration change, a production build was not working as expected because Rollup included iron-session in the server bundles, and the cookie package was not found during server start.

Also, the cookies were not included in an RSC update, but this was an easy fix on the framework side.

Update cookieObject in the Cookies class:

set(name, value, options) {
  this.cookieObject[name] = value;
  setCookie(name, value, options);
}

This change is needed, to properly use the updated session value during rendering. When processing a server function call, first the server function is executed, and then the React Server Component is rendered. setCookie only adds the cookie to a list to update the cookies with the response, but you will not see the changes without updating the cookieObject when you executing logic in the RSC to use either the Login or Logout component. You need to take care of updating your own cookie state in this implementation.

Different rendering strategies are being applied to the login and logout components. This happens because if react-server detects no client component usage, it will omit client-side hydration as it will not be needed as the page is fully static. Logout works with the server function redirect because it does not use RSC rendering, only executing the server function and responding with an HTTP 302 response.

A huge pack of bugfixes, new features, and enhanced error handling is on the way and it will include necessary changes addressing the issues found with redirect and cookies.

[nickw1]

Hi @lazarv, many thanks for addressing and fixing the bug and also giving recommendations for the code my side.

[nickw1]

To follow up: I can now confim that the minimal example is working fully, with no errors.
Closing the issue now.