React Server Components Best Practices You Can Use with Hydrogen - Shopify

What this post added

This post introduces best practices for using React Server Components (RSC) within the Hydrogen framework. It advocates for starting with shared components, then pivoting to client components only when necessary for interactivity (useState, useEffect, browser APIs, unsupported libraries), and to server components for server-side logic, secrets, filesystem/database access, and API data fetching. It provides detailed examples of refactoring a newsletter signup and product FAQ component to adhere to these principles, demonstrating the extraction of client-specific logic into separate `.client.jsx` files and renaming shared components to `.server.jsx` when appropriate.