Working with React Server Components

All data fetching happens on the server and is never exposed to the client, unless you explicitly fetch data in a client component.

Hydrogen provides the following ways to fetch data from server components:

• useShopQuery: A hook that makes server-only GraphQL queries to the Storefront API.
• fetchSync: A hook that makes third-party API requests and is the recommended way to make simple fetch calls on the server.
• useQuery: A hook that executes an asynchronous operation like fetch in a way that supports Suspense. You can use this function to call any third-party APIs or perform any async tasks.

To learn how to fetch data from third-party sources, refer to Data sources.

The following example shows a server component (Product.server.jsx) that uses the useShopQuery hook to fetch data. The data is passed to a client component (WishListButton.client.jsx) that uses state:

To make a third-party HTTP request on the client, use the fetchSync hook within a Suspense boundary:

Some third-party integrations offer a JavaScript SDK in the form of an npm package. You can use Hydrogen's suspendFunction utility to create a version of the SDK which supports Suspense data-fetching:

Hydrogen includes the following import locations:

• @shopify/hydrogen: An import path for functionality that's only used in server components. This doesn't include hooks that should only be used in client components.
• @shopify/hydrogen/client: An import path for functionality that's only used in client components. You should use this import path when writing your client components.

The following example shows how to use the @shopify/hydrogen import path in a server component:

The following example shows how to use the @shopify/hydrogen/client import path in a client component:

The following example shows how to import the Link component into a client and server component:

Hydrogen provides a useServerProps() hook with a setServerProps() helper function, which allows you to re-render server components with new data. You can use setServerProps() for UI states that shouldn't persist in the URL. Any data set with setServerProps() will be reset when the user navigates to a new page.

React developers commonly use Context to share state among many different components in a render tree, without having to drill props down to each individual component.

Currently, you can't use Context inside server components because server context isn't yet available in React. However, you can use Context inside client components.

The following example shows how to use Context in the CartProvider client component:

• useShopQuery
• fetchSync
• useQuery
• useServerProps

• Improve your app's loading performance with streaming SSR and Suspense.
• Learn about how Hydrogen consumes data from different sources.