The code I'm trying to debug is a close button at the top right corner in a Navbar component

'use client'

export const Navbar = ({

}: Props) => {

function ReadReturnUrl() {
const searchParams = useSearchParams()
const returnUrl = searchParams.get('return_url');
// This does not solve the error AND blocks deployment
return returnUrl;
}

return (
<div>
{/* Other irrelevant html /}

{/ Close button */}
<Suspense fallback={#Unknown Channel</>}>
<button
onClick={() => {
window.parent.location.href = ${ ReadReturnUrl() };
}}>
Close
</button>
</Suspense>
</div>
)
}

And if you look at this docs, https://nextjs.org/docs/app/api-reference/functions/use-search-params, this docs example syntax copy paste literally throws the previously linked error in deployment

'use client'

import { useSearchParams } from 'next/navigation'

export default function SearchBar() {
const searchParams = useSearchParams()

const search = searchParams.get('search')

// URL -> /dashboard?search=my-project
// search -> 'my-project'
return #Unknown ChannelSearch: {search}</>
}

"useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout"

'use client'

export const Navbar = ({

}: Props) => {

const searchParams = useSearchParams();
const return_url = searchParams.get('return_url');

return (
<div>
{/* Other irrelevant html /}

{/ Close button */}
<Suspense fallback={#Unknown Channel</>}>
<button
onClick={() => {
window.parent.location.href = ${ return_url };
}}>
Close
</button>
</Suspense>
</div>
)
}

Changed the code to pass const variable straight into the html section - This also fails, but is exactly the same syntax as the example, i thought

Do you also have to set it? Or only get

Only get and put it into a onclick

Why not use SSR component then?

It has a built-in searchParams prop

You could do that, and then wrap the client component with the onclick button inside

and pass the value to it

Oh Im unfamiliar with this, turns out Im using the wrong tool for the job?

No no, it is fine to use it, but since it errors, for unknown reasons, you can use SSR

Here is an example

Sorry what does SSR stand for? Or what should I be searching in the docs to get

Thank you!

Server side rendering (server component)

tbh you don't need hooks at all for this

yep

unnecessarily making it a client component

just make it a server component

if he only gets, no point

yep

But if you will need to set it later on, you can wrap a client component inside this SSR component, and just setparams, then router.refresh()

it will do the trick

oh like modify it to add additional filters

Does it matter that the parent to this component is a client component?

yeah that works :)

If the SSR component is async it won't work

What do you mean by parent?
Like, it wraps this specific SSR component?

Currently it's page.tsx (ssr) -> a client component -> this navbar component

Yeah thats problematic

Why would you do it though?

why not put the navbar into the page.tsx file

yeah, wrap it in the page.tsx

both client and ssr navbar

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#unsupported-pattern-importing-server-components-into-client-components This is exactly how navbar is put in rn

'use client'

// You cannot import a Server Component into a Client Component.
import ServerComponent from './Server-Component'

export default function ClientComponent({
children,
}: {
children: React.ReactNode
}) {
const [count, setCount] = useState(0)

return (
#Unknown Channel
<button onClick={() => setCount(count + 1)}>{count}</button>

<ServerComponent />
</>
)
}

yep that won't work

Ok so I need to turn navbar into a SSR, and put it into the page.tsx (which is a SSR)?

wait so navbar is a client?

so I see no issue in wrapping client inside client

navbar is already a ssr (if you haven't removed the hooks already), and make it a direct child of page.tsx

Yeah navbar rn is a client component

so whats the question 😄

ofc u can

ok since its a client component you won't face issues

so a parent ssr component that wraps a cl component that wraps another cl?

Yes ssr > cl > cl

Ur good to go

Make sure that the searchParams props are inside the SSR component

Idk why im getting this suspense error, I guess thats the question

And then just pass it to the other components if u need

this code here fails to deploy throwing this error still, "useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout"

page -> ssr
parent cl - wrap the navbar with suspense
navbar cl

yeah maybe try having the suspense outside the navbar component

Interesting lemme try it out, appreciate u both so much

yes, because it literally says wrap the useSearchParams, not the component

so it has to be wrapped in the parent level

u can either do that ^, OR make a navbarLoading.tsx + navbarContent.tsx

and have navbar.tsx with the suspense

just ur choice of where u want to put the Suspense

that's all

@Greenish Elaenia can it be related to the fact that you fetch something?
Make any promise at all? (async)

On the parent level or something

The parent level is kind of insane with a ton of sockets and fetch inside useEffect, etc
If I comment out and just feed a constant string "www.google.com" or something to the navbar's onclick that works fine

Well that explains it

What explains what?

OMG?! it worked

Im glad

Well, obviously, if you do any async stuff on a top level and you except the useSearchParams to work, its not gonna happen

Because you mutate the searchParams, I guess on the top level, but the child still doesn't have any access to it

@Havana @Cimarrón Uruguayo tysm its been blocking me for 2 days now, next time youre in Taipei, Taiwan. plz message me, dinner and drinks on me

So you have to wrap it inside suspense to make sure the component (child), loads only after all the logic has passed

😎

nws bro

so the block is due to the parent doing the async awaiting, so it is the component that needs Suspense

and navbar in this case is like a readonly sort of situation?

So, adding suspense in the navbar doesnt do anything..

wdym 😄

It is actually a rare case, because useSearchParams works independently of any async stuff, it works in a sync mode, it just reads url params, but I guess in this specific case it does require waiting

'rare case' ok i dont feel so dumb now

Maybe you are making any async operations that affect the params?

not that i know of, the one-page app doesnt change the url until people leave the site

But when do you change it? In the navbar?

the navbar takes a prop string that is set by a socket.on("whatever", function...)

oh..

💡 i see now

oh 😄

so the socket needs to be executed, any only then render the navbar with the stuff you need

Yep, a rare case

that makes so much sense now

Now u know

really appreciate you