It seems like Next.js really doesn't like that I use the suspense feature manually on a Client Page route, and it runs the request in a server environment even though it's not

Considering the following route structure, where both Page and Home are client components:

// app/page.tsx
<Suspense fallback={<div'>loading...</div>}>
  <Home />
</Suspense>

Inside <Home /> I'm fetching data that will be used to display the contents of the page (it can't be a server component)

The fecthing goes like this:

// suspend() is using suspend-react library - I also tried without it (just throwing a Promise and managing state manually)
// AND with react-query, both yield the same error
async function getMultipliers() {
      const res = await fetch(`/multipliers.bin`)
      const buffer = await res.arrayBuffer()
      const decompressedStreamBuffer = LZMA.decompressFile(buffer)
      const rawBytes: Uint8Array = decompressedStreamBuffer.toUint8Array()

      return rawBytes
}

const multipliersArray = suspend(async () => await getMultipliers(), [])

This correctly suspends the component and displays the fallback in the <Suspense /> tag, but I get an error in the console:

react-dom.development.js:17497 Uncaught 
Error: Failed to parse URL from /positions.bin
    at updateDehydratedSuspenseComponent (react-dom.development.js:17497:1)
    at updateSuspenseComponent (react-dom.development.js:17193:1)
    at beginWork$1 (react-dom.development.js:18509:1)
    at beginWork (react-dom.development.js:26927:1)
    at performUnitOfWork (react-dom.development.js:25748:1)
    at workLoopSync (react-dom.development.js:25464:1)
    at renderRootSync (react-dom.development.js:25419:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:24504:1)
    at workLoop (scheduler.development.js:256:1)
    at flushWork (scheduler.development.js:225:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:1)

Now, I managed to hack my way around this error by dinamycally importing the <Home /> component and explicitly setting the ssr to false in the options:

const Home = dynamic(() => import('@/components/home/home').then((mod) => mod.Home), {
  ssr: false,
  loading: () => <div>loading...</div>,
})

With this, the error goes away, but I'm left wondering why it even happened in the first case

This <Home /> component shouldn't even exist, it should just be the content of the app/page.tsx component, which combined with an app/loading.tsx component gives the exact structure needed to use suspense, so I'm convinced there's something wrong going on here

Accidentaly pressed the hotkey to comment and close, my bad

"use client" only means the code will be sent to the browser, it does not skip server rendering.

@pedroalmeida415 "use client" does not mean "client only", it means "send all the JS to the client".

In a nutshell, you are trying to use the library as one would in a plain React application.

Try using useSuspenseQuery from react-query. You need to use hooks; if you only want to fetch in the browser, you would run the fetch inside useEffect and then suspend from there. Or you can save yourself a lot of effort and use react-query.

Or better yet, use a server component and let Next build your page statically: https://stackblitz.com/edit/stackblitz-starters-jcwjjf?file=app%2Fpage.tsx

@pedroalmeida415 "use client" does not mean "client only", it means "send all the JS to the client".

In a nutshell, you are trying to use the library as one would in a plain React application.

Try using useSuspenseQuery from react-query. You need to use hooks; if you only want to fetch in the browser, you would run the fetch inside useEffect and then suspend from there. Or you can save yourself a lot of effort and use react-query.

Or better yet, use a server component and let Next build your page statically: https://stackblitz.com/edit/stackblitz-starters-jcwjjf?file=app%2Fpage.tsx

From the react docs. https://react.dev/reference/rsc/use-client#how-use-client-marks-client-code

During render, the framework will server-render the root component and continue through the render tree, opting-out of evaluating any code imported from client-marked code.

The server-rendered portion of the render tree is then sent to the client. The client, with its client code downloaded, then
completes rendering the rest of the tree.

I am encountering this error when using the TRPC integration with react-query's useSuspenseQuery hook. Code marked with 'use client' shouldn't run on the server. The issue I am encountering with useSuspenseQuery could be different but it seems very similar to this issue.