I'm using the App Router with next.js

From my understanding, it's a good idea to keep as much content as possible SSR

If I have a component which needs to be a client component, should I make it as small as possible?

Here are two examples:

"use client";
import { signIn, signOut, useSession } from 'next-auth/react';
import { FaDiscord } from 'react-icons/fa';

export default function DiscordLogin() {
    const session = useSession();
    console.log('session', session);
    if (!session) {
        <button
            className="max-w-[14rem] bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex items-center"
            onClick={() => signIn('discord')}
        >
            <FaDiscord className="mr-2" />
            Sign in with Discord
        </button>
    }

    return <>
        <button
            className="max-w-[20rem] bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded flex items-center"
            onClick={() => signOut()}
        >
            <FaDiscord className="mr-2" />
            Signed in as {session.data?.user?.name}. Sign out
        </button>
    </>;
}

vs

import SignInButton from './SignInButton';
import SignOutButton from './SignOutButton';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/app/api/auth/[...nextauth]/route';

export default async function DiscordLogin() {
    const session = await getServerSession(authOptions);
    console.log('session', session);
    if (!session) {
        return <SignInButton />
    }

    return <SignOutButton username={session.user!.name as string} />
}

is the second option preferred? I'm wondering if moving those buttons into their own components is a bit overkill