RSCs <-> Client Components Patterns

A few examples that explore different patterns for interleaving react server components (RSCs) with client side components ("use client";) in Next.js.

Understanding these patterns, alongside server actions, helps one compose components in a cleaner manner. It also helps to create better component interfaces, both client components that accept RSCs (pattern #1), and RSCs that accept client components (patterns #2 and #3).

Except for the first pattern, I came across these while experimenting but have not found it in upstream docs. Please add a link (pull-request) if you do.

  1. Pass rendered server component to a client component via a prop
  2. Pass imported client component reference to RSC via a prop
  3. Pass a client component to another client component, composed in an RSC
  4. Assigning client-side event handlers directly from RSCs