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.