mixing server and client components the right way - By Sourav Mishra (@souravvmishra)

so the biggest mistake i see with the app router is treating it like the old pages router.

people just slap 'use client' at the top of everything. bad idea!

i'll show you how to keep things fast on the server while still having interactive buttons on the client.

the interactivity hole

instead of making the whole page a client component, just wrap the small interactive parts.

this keeps the heavy stuff on the server and ships less JS to the user.

the golden rule of composition

you literally can't import a server component (rsc) into a client component (rcc).

wait, then how do i combine them?

you pass the rsc as a child to the rcc! like this:

// InteractiveWrapper.tsx (RCC)
'use client';
export default function InteractiveWrapper({ children }: { children: React.ReactNode }) {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      {isOpen && children}
    </div>
  );
}

// Page.tsx (RSC)
export default function Page() {
  return (
    <InteractiveWrapper>
      <HeavyServerComponent />
    </InteractiveWrapper>
  );
}

why bots care about this

search engines and ai bots love server components because the html is ready instantly.

if you spam 'use client', you create empty boxes that bots have to wait for. they hate waiting.

wanna know more about bots? read my seo & geo guide.

written by sourav mishra, just coding away.