# React Server Components Best Practices You Can Use with Hydrogen

DevFeed: [React Server Components Best Practices You Can Use with Hydrogen](<https://devfeed.tech/articles/react-server-components-best-practices-you-can-use-with-hydrogen-1538.md>)

Original publisher: [Read original article](<https://shopify.engineering/react-server-components-best-practices-hydrogen>)

Author: Cathryn Griffiths

Published: 2022-02-04T17:30:00Z

Content type: tutorial

Language: en

Sources: [Shopify Engineering](<https://devfeed.tech/sources/shopify-engineering.md>), [Shopify Engineering - Shopify Engineering](<https://devfeed.tech/sources/shopify-engineering-shopify-engineering.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Refactoring](<https://devfeed.tech/topics/refactoring.md>)

Tags: [best-practices](<https://devfeed.tech/tags/best-practices.md>), [building](<https://devfeed.tech/tags/building.md>), [code](<https://devfeed.tech/tags/code.md>), [components](<https://devfeed.tech/tags/components.md>), [deep-dive](<https://devfeed.tech/tags/deep-dive.md>), [developers](<https://devfeed.tech/tags/developers.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [react](<https://devfeed.tech/tags/react.md>), [refactoring](<https://devfeed.tech/tags/refactoring.md>)

## AI overview

This article explains patterns and best practices for using React Server Components in Hydrogen, Shopify's React-based framework for custom storefronts. It recommends starting with shared components, carefully deciding whether logic belongs on the client or server, and using client components only when necessary to avoid unnecessarily large bundles.

## Source excerpt

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.