Are you using suspense anywhere?

Yes

I was using loading.tsx and suspense

inside layout.tsx I had children wrapped in suspense

So you have to add a fallback in suspense

i did

the error is more talking about the fallback data used in the suspense inside the useSWR rather than fallback inside the suspense

Can you send code where you are using suspense

yup, give me 5 mins to open my laptop

Here, inside the layout.tsx

You can’t use suspense in layout files

You can use loading.tsx

it's a CMS, this layout, it's not the main layout, it's a nested layout inside (home) it's a layout.tsx that uses "use client"

It is a known and ignored issue: https://github.com/vercel/next.js/discussions/44385

Can you send both of your layouts?

When you remove suspense, does it work, or do you still get the error?

@African Slender-snouted Crocodile updates?

sry, forgot about the thread.

still get an error

i fixed it by disabling SSR on the components that i was renderingf on that page

as far as i knew, if i mention "use client" that shouldn't be taken as SSR and it should render on client, well for some reason it didnt work for those components

they were SSR even tho they had "use client" at the top

No, use client also renders as SSR, unless you dyamically import it and set SSR to false

but why? how does it help? SEO?

like, what is the case when you should disable SSR, and why would u do that?

especially since u can have useState inside a SSR component, or load data or smth

SSR helps with SEO, and I believe it also reduces load time on the frontend

im kinda confused tho, why do we mention "use client" then?

if comp still renders on server?

what is diff between "use server" and "use client"?

The difference is that, for use client, It is rendered on the server, but hydrated on the client

Ahhhh 🤔 , that means, it renders everything static on server, and then on hydration it adds the client fetched data ? 🤔

Yes, it basically adds interactivity on client Side

Despite the name that might be a little misleading, ”use client” and ”use server” are not opposite to each other, rather they serve a different purpose and work together, it’s not either one or the other.

These directives are instructions to the bundler:

You must know that all code is run server side in Next.js (unless you set SSR to false), so ”use client” means you’re wanting this code chunk to be sent to the client as well, because the component needs some sort of interactivity and needs to hydrate, because it requires client side only features such as React State, event handlers, refs, effects, window APIs (local storage, etc).

That said, once you’re on the client, you might still want leverage the server to perform certain actions, here’s where you use ”use server”, to tell the bundler that this function code will be exposed as an Endpoint for the client components to reach, essentially when you mark a async function with ”use server” you’re creating a POST endpoint under the hood.

Both directives are meant to work together to leverage features in both environments: server and client, but they’re not opposite. Hope this helps! 🙂

Yup. Thank you very much!! ❤️ it was truly helpful

Happy to help

Oh ya, I forgot to point that out, I currently had server components, and client components in mind