question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next 13 fetch in server component stuck forever if response is larger than ~15kb

See original GitHub issue

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: Ubuntu 20.04.0 LTS Wed Oct 26 2022 14:44:18 GMT+0200 (Central European Summer Time)
Binaries:
  Node: 16.14.2
  npm: 7.17.0
  Yarn: 1.22.19
  pnpm: 7.13.6
Relevant packages:
  next: 13.0.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When fetching data as described in the docs, the fetch function gets stuck and never resolves, if the payload reaches a certain size.

I created a minimal stackblitz and a mock api to reproduce the problem. If I fetch 75 posts from the mock api it will never resolve, if I only fetch 50 it works fine. Since I was able to reproduce this problem with multiple mock apis and even when using something like supabase to fetch some data I think it might be a size issue? Here the difference is 14kb vs 20kb for the two requests.

EDIT: I tried to nail the problem down further. fetch does indeed resolve but .json() does not. Does this have to do with the highWaterMark buffer size limit on nodejs streams?

Expected Behavior

Fetch should not get stuck forever.

Link to reproduction

https://stackblitz.com/edit/nextjs-vv7ryj?file=app/page.tsx

To Reproduce

  • Open the stackblitz
  • Comment out line 3 and comment in in line 4 in pages.tsx to fetch 75 instead of 50 posts
  • See that fetch never resolves

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:23
  • Comments:20 (5 by maintainers)

github_iconTop GitHub Comments

87reactions
t3dotggcommented, Oct 26, 2022

This hurts me deeply

24reactions
balazsorban44commented, Oct 27, 2022

Thanks for reporting, I did some digging, and the issue seems to be node-fetch-specific.

Currently, on the server, Next.js uses node-fetch to polyfill fetch when Node.js <18 is used. Above Node.js 18, or when the experimental: {enableUndici: true} option in next.config.js is present, we will use undici instead, which does not have this problem.

So current workarounds are:

  1. Use Node.js 18 or above, if possible
  2. Add the following to next.config.js:
module.exports = {
  experimental: {
    enableUndici: true
  }
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Travis Arnold on Twitter: "Ah, it's this issue https://t.co ...
Next 13 fetch in server component stuck forever if response is larger than ~15kb · Issue #41853 ·... Verify canary release I verified...
Read more >
Next.js 13 の React Server Components(RSC) とデータフェッチ
Next 13 fetch in server component stuck forever if response is larger than ~15kb · Issue #41853 · v. Verify canary release I...
Read more >
POP3 download stuck in "This folder is being processed" when ...
Server drops connection (see details below) before message is downloaded. TB appears to be stuck on downloading the first message 4. Local folders...
Read more >
Data Fetching with React Server Components - YouTube
For comments, please find the RFC link in the blog post: https://reactjs.org/ server -components2020 has been a long year.
Read more >
Discussion of Stop Using React - DEV Community ‍ ‍
This very page with a tiny handful of images is shipping nearly 100 kb of image data, which is 3x more data than...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found