Need some clearify.

[imHamo]

Hello, I’m a big fan of Next.js and really appreciate its capabilities! I have a couple of questions to clarify some concepts, and I’m hoping someone can help clear things up for me.
Server-Side Rendering (SEO): I have a Page.tsx file that contains components like , which are all client-side (marked with "use client"). Will my page still be rendered server-side and maintain good SEO, or will it be considered client-side because of the client-side components? Do I need to convert those components to server-side as well to ensure proper SSR?

Filtering Products with URL Params: I’m working on filtering products based on URL parameters but running into an issue, possibly due to a misunderstanding.
I have a client-side component called that uses the nuqs library. When a checkbox is clicked, it sets a URL param like ?type=hello. In my Page.tsx, I have two components:
(server-side)

(client-side)

My goal is to filter products based on the URL param. Inside , I access the params using searchParams and filter a products array with .filter().
The Problem: The UI doesn’t update when the param changes (e.g., when a checkbox is clicked). The products remain the same. However, if I visit the page directly with the param (e.g., ?type=hello), the products are filtered correctly.
I want the UI to re-render and reflect the filtered products when the param changes. Is this possible while keeping server-side, or am I forced to make it client-side (with "use client") to achieve this? My goal is to minimize the use of client-side components as much as possible.

Any insights or suggestions would be greatly appreciated! Thank you!

[imHamo]

Luckily, I was able to fix the issue by using router.push() with the new parameters. I hope this is the best approach. I still need an answer to my first question though

[GiorgiTsukhishvili]

In case of 'use client' next.js uses hybrid approach, renders stuff that can be rendered on the server and some stuff are rendered on client after hydration. However, if critical content for SEO is contained only within client components, there are some considerations:

Content in client components will be visible to search engines that execute JavaScript (like Google)
The initial HTML sent from the server will include placeholders for client components
For optimal SEO, it's best to keep important content (headings, main text, metadata) in server components

You don't necessarily need to convert all components to server components, but structuring your application with SEO in mind is important

to answer your second question, router.push() would be good approach as with it new page with correct query params will be rendered, it may be slow sometimes as it loads new page.

[imHamo]

Thank you for the explanation, I really appreciate it.
Just to confirm—using router.push inside the Filter (Client component) to update the URL like ?type=hello is the best approach here, right?
Or is there a faster method? Because if I don't use router.push, the params change, but the server-side components that rely on them won't react.

[GiorgiTsukhishvili]

Yes that is best approach as you need to update query params in url