Infinite render loop with server components when running next dev

[marozzocom]

Run next info (available from version 12.0.8 and up)

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Pro

Binaries: Node: 16.13.0 npm: 8.1.0

Relevant packages: next: 12.0.8 react: 18.0.0-rc.0 react-dom: 18.0.0-rc.0

What version of Next.js are you using?

12.0.8 (issue appears in 12.0.8-canary.13)

What version of Node.js are you using?

16.13.0

What browser are you using?

not relevant

What operating system are you using?

Windows

How are you deploying your application?

next dev

Describe the Bug

Using next dev, a page rendering as a server component seems to render in an infinite loop. This can be observed in developer tools Network tab, where a test?__flight__=1 can be seen repeat itself infinitely.

This problem does not occur when running next build and next start. It is only observed when running next dev.

The problem starts occurring in 12.0.8-canary.13.

Any code in the component root gets repeated as the component rerenders on server, so I believe this problem would cause any data fetching done in the server component to repeat infinitely.

Expected Behavior

The development mode works similarly to production build, without the infinite calls and rerenders.

To Reproduce

1. Clone the example repository
2. run npm install
3. run npm run dev
4. navigate to http://localhost:3000/test
5. open developer tools and observe the Network tab

Edits made in example repository after create-next-app

• enable experimental features in next.config.js
• add customized pages/_document.js page
• add pages/test.server.js page

[balazsorban44]

Thank you for pinpointing the exact version where this started happening! I can confirm, 12.0.8-canary.12 is the last version this did not occur.

From the changelog, I suspect this was the PR that introduced the bug: #32710

[chawkibenalaya]

I have the same issue with this version 12.0.8-canary.12 , any solutions please ?

[I-keep-trying]

Also happening with version 13.

The only other difference is it's happening with timing config:load:flatten * infinity in console, in dev mode. (I'm fairly new to next, so I'm not sure how relevant that is or what it even means to begin with.)

Operating System:
Platform: win32
Arch: x64 Version: Windows 10 Pro Binaries: Node: 18.12.1 npm: 8.19.2 Relevant packages: next: 13.0.3 eslint-config-next: 13.0.3 react: 18.2.0 react-dom: 18.2.0

[balazsorban44]

Hi, since Next.js 13, React Server Components is only supported in the app directory. See https://beta.nextjs.org/docs/getting-started.

If you still have issues, please open a new issue with a reproduction, using next@canary. Thanks. :pray:

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.