Hi everyone! I'm really confused about mixing SSR and CSR components. For example, let's say I have a SearchResult component that contains a list of products as the result of a search request. I'd like it to be an SSR component since the request is made from the URL bar (e.g., the user opens the URL nextjssite.example/search?productName=cup, and on the server, we can obtain the productName search parameter and use it to query the resource). However, I have a theme provider in the root layout that wraps all components down the tree.

layout.tsx
// ThemeProvider is a Client Component (use client is defined in ThemeProvider.tsx)
import ThemeProvider from './ThemeProvider'
// SearchResults I want to have as a Server Component
import SearchResults from './SearchResults'
 
export default function Layout() {
  return (
    <ThemeProvider>
      <SearchResults />
    </ThemeProvider>
  )
}

The confusing part from the documentation is: 'This means that by defining a "use client" in a file, all other modules imported into it, including child components, are considered part of the client bundle.' SearchResults is making a request to fetch the products list from a third-party service. Does including SearchResults inside ThemeProvider mean that the request will be made from the browser? I fee like the answer is no, but what the difference then between SSR which is not nested in CSR component and SSR which is nested?