In NextJS, if setting "use client" on layout.jsx, will the children props lack SSR capability

Question

    I have sub categories of products, and I want to use some hooks to add a border on the selected category for additional clarity. There will be 3 child pages in this example.
My question is: by turning the layout.jsx into a "use client" component, will the children lose out on SSR capabilities, and ultimately, SEO (the product information is crucial to web crawlers & cannot be sacrificed.)
    I cannot seem to find a straight answer if each page is independent of one another, or if nesting pages under a client component will have a direct effect. Please advise, and thank you for your time.

layout.jsx code:

"use client"
import Link from 'next/link';
import Image from "next/image";
import img from 'public/images/category/products/X1.png';
import img2 from 'public/images/category/products/X2.png';
import img3 from 'public/images/category/products/X3.png';
import { useRef, useState } from 'react';


export default function ProductSubCategoryLayout({ children }) {
    const [border1, setBorder1] = useState(false);
    const [border2, setBorder2] = useState(false);
    const [border3, setBorder3] = useState(false);

    const ref1 = useRef();
    const ref2 = useRef();
    const ref3 = useRef();

    const handleSelect = () => {
        if (ref1.current.name === '1') {
            setBorder1(true)
        } ... {}
    }

            return (
                <>
                    <h1>Product1 Product2 Product3</h1>
                    <div className="flex flex-row flex-wrap items-center justify-center gap-4">
                        <Link onClick={handleSelect} useref={ref1} className={`underline text-secondary btn flex flex-col my-2 ${border1 ? 'border border-secondary border-dashed' : ''}`} href={'/category/products/X1'}>Product1<Image className='mx-auto h-16 w-auto' src={img} alt="desc" /></Link>
                        <Link onClick={handleSelect} useref={ref2} className={`underline text-secondary btn flex flex-col my-2 ${border2 ? 'border border-secondary border-dashed' : ''}`} href={'/category/products/X2'}>Product2<Image className='mx-auto h-16 w-auto' src={img2} alt="desc" /></Link>
                        <Link onClick={handleSelect} useref={ref3} className={`underline text-secondary btn flex flex-col my-2 ${border3 ? 'border border-secondary border-dashed' : ''}`} href={'/category/products/X3'}>Product3<Image className='mx-auto h-16 w-auto' src={img3} alt="desc" /></Link>
                    </div>
                    {children}
                </>
            );
        }

Answer 1

Per the docs

"use client" is used to declare a boundary between a Server and Client Component modules. 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.