AppRouter Suspense not working in Safari on Mac or iOS

[josephearl]

Verify canary release

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

Provide environment information

macOS Ventura 13.4.1
Safari Version 16.5.1 (18615.2.9.11.7)

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

App Router

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

https://codesandbox.io/p/sandbox/quirky-danilo-nycr3t

To Reproduce

Open the app in Chrome https://nycr3t-3000.csb.app/ Observe that the page is rendered quickly and "Loading car..." is displayed until the car has loaded

Open the app in Safari https://nycr3t-3000.csb.app/ Observe that the page does not render until the car has loaded and never displays the "Loading car..." message

Open the app in mobile Safari on iOS Observe the same behaviour as on Safari on Mac

This seems like the same behaviour as when you just the curl the URL - nothing is loaded until the final HTML

If you make it so that next runs the route dynamically (e.g. add a fetch with { cache: 'no-store' }) and then build and run the app locally in production mode npm run build && npm start the same is observed, so it's not dev server specific

Describe the Bug

Suspense/streaming does not work in Safari

Expected Behaviour

Same behaviour is observed in Chrome as Safari

I'm not sure about to what to expect with curl, I guess the behaviour of not rendering the page until all data is loaded makes sense since curl would not support replace the fallback of course

Which browser are you using? (if relevant)

Safari Version 16.5.1

How are you deploying your application? (if relevant)

No response

[josephearl]

Noticed the same behaviour with Remix in Safari, so probably a React or Safari issue

[ardikaveh]

Any work arounds?

[josephearl]

Raised it with React maintainers https://github.com/facebook/react/issues/27089

[shuding]

This is likely caused by Safari having a minimal chunk size for streaming. If the fallback HTML chunk is too small, Safari might just buffer it without displaying anything.

[josephearl]

Probably related @shuding https://bugs.webkit.org/show_bug.cgi?id=252413

[dfiedlerx]

Any solution for this? I ran into the same problem and the use of suspense is essential for my use case.

[yarikpetrenko]

@dfiedlerx After seeing a lot of comments about the chunk size I tried increasing the size of my loading.tsx file and it works, any file larger than 1Kb works fine. But if loading.tsx is 999 bytes or less the whole page will be blocked until the promise is resolved.

[luistak]

Hi guys any news about this issue or a framework workaround?

[fillippeprata]

Hi guys, any news about it?

[iycodes]

@dfiedlerx After seeing a lot of comments about the chunk size I tried increasing the size of my loading.tsx file and it works, any file larger than 1Kb works fine. But if loading.tsx is 999 bytes or less the whole page will be blocked until the promise is resolved.

how to increase file size?

[yarikpetrenko]

@iycodes You just add some text to your file and then to see the actual size you need to build your project and check the size inside build folder. When I was testing I found that comments do nothing, it only works if you add actual payload that will be sent to the client.

[Fakerko]

Any solution for this except of adding some text to loading component?