The example app that I built during the tutorial does so.

<ClientComponent>
  <ServerComponent />
</ClientComponent>

<Page> // server. Take the `searchParams.q` from the page props
  <SearchForm /> // client, include all routing / input state logic
  <Suspense>
    <SearchResults query={query} /> // server, async
  </Suspense>
</Page>

const SearchResults = async ({ q }: { q: string }) => {
  const searchResults = await fetchSearchResult(q);
  // ...
}

export default async function Page(props: { searchParams: SearchParams }) {
  const searchParams = await props.searchParams;
  const q = searchParams ? searchParams['q'] : undefined;
  const page = searchParams && searchParams['page'] ? +searchParams['page'] : 0;

  return (
    <Centred className="flex flex-col gutterless:pt-12 transition-all">
      <SearchCard />
      {typeof q === 'string' && (
        <Suspense fallback={<Busy />}>
          <SearchResults q={q} page={page} />
        </Suspense>
      )}
    </Centred>
  );
};

const SearchResults = async (props: { q: string, page: number }) => {
  const searchResults = await fetchSearchResult(props);

  return (
    <>
      <ul>
        {searchResults?.map((result, i) => (
            <li
              key={i}
              className={`px-3 gutterless:px-5 py-4 transition-all ${i % 2 === 0 ? 'surface2' : 'surface3'}`}
            >
              <div className={'flex flex-row gap-3 items-start'}>
                <img
                  src={`data:;base64,${result?.cover_image_base64}`}
                  alt={result?.title || ''}
                  className="object-contain w-16"
                />
                <div className={'overflow-hidden text-ellipsis flex flex-col gap-1 w-full'}>
                  <div className={'flex justify-between'}>
                    <div className={'leading-5'}>
                      <div className={'text-search'}>{result?.title}</div>
                      <div className={'text2'}>{result.section}</div>
                    </div>
                    <div>
                      <div
                        className={'text-xs text-search-secondary border-search-secondary border px-1 inline-block w-fit rounded opacity-70'}
                      >
                        {result.score?.toFixed(scoreDp)}
                      </div>
                    </div>
                  </div>
                  <div className={'flex gap-2'}>
                    <Link
                      className={'a overflow-hidden line-clamp-2 text1'}
                      href={result?.href ?? ''}
                      target="_blank"
                    >
                      {result.text}
                    </Link>
                  </div>
                </div>
              </div>
            </li>
          )
        )}
      </ul>
    </>
  );
};