Suspense boundary behavior for transitions, initial load, and non suspending components.

[ryanto]

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.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: N/A
      pnpm: 8.6.12
    Relevant Packages:
      next: 13.4.14-canary.2
      eslint-config-next: 13.4.13
      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 Router, Routing (next/router, next/navigation, next/link)

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

https://github.com/ryanto/next-13-suspense-transition

To Reproduce

The reproduction app contains a /route1 page that renders a server component in a suspense boundary. When visiting /route1 directly, the suspense boundary is not shown. However, when transitioning to /route1 (using <Link>), the suspense boundary gets rendered.

1. Visit /route1 directly, reload a few times, no suspense boundary shown.
2. Visit /, and click to the link to /route1. Suspense boundaries are shown.

Describe the Bug

It seems that a non-suspending component can trigger a suspense boundary during a transition, but not an initial render.

async function Page() {
  return (
    <Suspense fallback={<div>Shown for transitions, not initial load</div>}>
      <ServerComponent />
    </Suspense>
  );
}

async function ServerComponent() {
  return <div>I dont suspend</div>;
}

This behavior surprised me because I thought the boundary should not be shown when transitioning, but I might be misunderstanding something.

Also, the same behavior happens when awaiting an already resolved promise (suspend boundary is not shown on the initial render, but shown for a transition).

Expected Behavior

I'm not sure- but I was expecting the suspense boundaries to not be shown.

Which browser are you using? (if relevant)

Version 1.56.20 Chromium: 115.0.5790.171 (Official Build) (arm64)

How are you deploying your application? (if relevant)

No response

[nextjs-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!