Skip to content

Server actions are not progressively enhanced if imported from a client component #52137

@Fredkiss3

Description

@Fredkiss3

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:19 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: 1.22.19
      pnpm: 8.6.2
    Relevant Packages:
      next: 13.4.8-canary.15
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Data fetching (gS(S)P, getInitialProps)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/Fredkiss3/next-client-server-action-bug

To Reproduce

  1. clone & start the server
  2. disable JavaScript in the browser and reload the page
  3. click on the button Increment counter next to Server form, you will see that it work and browser gets reloaded
  4. click on the button Increment counter next to Client form, it won't work

Describe the Bug

When importing server actions from a client component, next seems to not initialize them so that they could work without JavaScript enabled or before the JS has finished loading. The generated HTML in SSR is different wether the server action is imported from a server component or a client component.

Here is the html generated for the server component :

<form action="" enctype="multipart/form-data" method="POST">
  <input type="hidden" name="$ACTION_ID_8e9a737600b0f7123502bed2e2e35f84115a82c7" />
  <button> Increment counter </button>
</form>

Here is the html generated for the client component :

<form action="javascript:throw new Error('A React form was unexpectedly submitted.')">
  <button>Increment counter</button>
</form>

We can see clearly that a hidden input indicating the correct action is missing and there are props that are missing on the form.


This bug seems to have been introduced in [email protected] as of [email protected] as the generated HTML for the client component is the same for 13.4.8-canary.1 :

<form action="" enctype="multipart/form-data" method="POST">
  <input type="hidden" name="$ACTION_ID_8e9a737600b0f7123502bed2e2e35f84115a82c7">
  <button>Increment counter</button>
</form>

i suspect this PR to be the cause : #51723 (though i may be wrong).

Expected Behavior

Server actions in client components should also be progressively enhanced, and the generated HTML in SSR should be the same.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Pages RouterRelated to Pages Router.bugIssue was opened via the bug report template.locked

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions