Next14 multiple re-renders issue using Dynamic Import with Server Actions, SWR and Next Auth

[AnasArafeh]

Link to the code that reproduces this issue

https://github.com/AnasArafeh/Nextjs14-DynamicImport-SWR-ServerAction-NextAuth-Issue

To Reproduce

1. Start the application ( linked Repo )
2. Open browser ( http://localhost:3000 )
3. Refresh the page

Current vs. Expected behavior

Following the steps the client component should not render more than two times at max. However, the component is being re-rendered depending on how many dynamic imports we have in the page ( does not matter if the page is parent or not ), the more we add the more renders.

The issue happens exactly when we combine Dynamic imports with Server actions, SWR and next auth. So to be honest not sure where the issue exactly lays. But this is how we can reproduce it:

I call "useSession" and "useSWR" in client component. The "useSWR" is calling "getProducts" which is a "server action" and the "server action" is calling "getServerSession" from "next auth" and after that it calls an api to get the data. And the "server page" is dynamically importing (server / client) components.

1- In case I change dynamic import to static import the issue disappear. 2- In case I remove/comment either of "useSession" or "useSWR" in the client component the issue disappear. 3- In case I remove "getServerSession" from the server action the issue disappear. 4- In case I put the fetcher function "getProducts" in the client page and for example call an API route which calls "getServerSession" the issue also disappear.

you can check the below screenshot for see an example. for detailed info please check the linked repo.

client component

server action component

page code sample

browser screenshot

even we I remove the client component from the parent page and put it for example in the layout the issue persists

Verify canary release

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

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Enterprise
Binaries:
  Node: 18.18.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.5-canary.45
  eslint-config-next: 14.0.5-canary.45
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Data fetching (gS(S)P, getInitialProps), Dynamic imports (next/dynamic)

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

I tested the issue in version 14.0.3, 14.0.4 and 14.0.5-canary.45 and all of them produce this issue

[AnasArafeh]

@shuding @balazsorban44 @huozhi May you please point whether the issue is related to Nextjs (Server actions / dynamic imports ), or in case I need to open an issue on the NextAuth library or SWR library.

[ianujvarshney]

@AnasArafeh you can fix this issue just pass getserversession in sessionprovider.

[AnasArafeh]

@ianujvarshney Thank you for your response. This solution resolved the re-render issue. But this will cause two issues: 1- There will be some blocking before generating the pages until we get the session as mentioned in next auth docs ( not a major issue i guess) 2- When calling a static page the session will be returned as null and it will be passed to the client component as so, so you will not have the authentication data. ( before adding the proposed solution when we could call a static page and the client component gets the session data without an issue ) this can be a major issue in case it has no direct solution.

Furthermore, I believe that this solution does not resolve the core issue here.