React Server Components Best Practices You Can Use with Hydrogen

A deep dive into the patterns and best practices for React Server Components learned while building Hydrogen, Shopify's React-based framework for building custom storefronts.

Shopify logo
Shopify
•
Cathryn Griffiths
•8 min read•beginner•
--
•View Original
React

Overview

This article explores best practices for using React Server Components (RSC) in the Hydrogen framework, emphasizing the importance of shared components and the strategic pivoting between client and server components. It provides actionable insights and examples to enhance the development experience and optimize application performance.

What You'll Learn

1

How to identify when to use shared components in a React Server Components application

2

When to pivot a shared component to a client component for specific interactivity needs

3

How to convert a component to a server component to optimize bundle size and security

Prerequisites & Requirements

  • Basic understanding of React and component architecture

Key Questions Answered

What are the best practices for using React Server Components in Hydrogen?
The article outlines several best practices, including starting with shared components, pivoting to client components only when necessary, and converting components to server components when they do not require client-side execution. This approach helps reduce bundle size and improve performance.
When should a component be converted to a client component?
A component should be converted to a client component when it requires client-side interactivity, such as using hooks like useState or useEffect, or when it needs to interact with third-party libraries that do not support server components.
How can I optimize my React application using server components?
To optimize a React application, prioritize creating server components for logic that does not need to run on the client, such as data fetching from APIs or accessing the filesystem. This reduces the client bundle size and enhances performance.
What is the importance of shared components in RSC applications?
Shared components serve as a versatile starting point in RSC applications, allowing for functionality that can run in both server and client contexts. This helps developers ask critical questions about where code should execute, leading to better architectural decisions.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React
Used for building user interfaces and components in the Hydrogen framework.
Frontend Framework
Hydrogen
A React-based framework for building custom storefronts.

Key Actionable Insights

1
Start your component development with shared components to ensure flexibility between server and client contexts.
This approach encourages developers to think critically about the execution context of their code, leading to more efficient and maintainable applications.
2
Only pivot to client components when necessary, extracting only the required interactivity.
By minimizing the size of client components, you can significantly reduce the overall bundle size, improving load times and performance.
3
Convert components to server components when they do not require client-side execution.
This practice not only enhances security by keeping sensitive logic on the server but also optimizes performance by reducing the amount of JavaScript sent to the client.

Common Pitfalls

1
Defaulting to client components can lead to larger bundle sizes and unnecessary complexity.
Many developers may initially favor client components for ease of use, but this can result in performance issues and bloated applications. It's crucial to evaluate the necessity of client-side execution before making this choice.

Related Concepts

React Server Components
Component Architecture
Performance Optimization Techniques