DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Shopify Hydrogen: Why is useShopQuery server-side only?
Rafael CorrΓͺa Gomes
Rafael CorrΓͺa Gomes

Posted on • Originally published at rafaelcg.com

Shopify Hydrogen: Why is useShopQuery server-side only?

During the Shopify Hydrogen or headless development, you might have many architectural questions, this is this article’s topic. Probably you wondering why we should implement Storefront API requests from the server-side, including in useShopQuery. If you’re struggling to understand the reasoning that article is for you.

The quick answer is:

Storefront API is a rate-limited API associated with the requesting IP.

React Server Components and their unlocking of the ability to make server to server requests provides aΒ performance boost. An API request from the client browser to Shopify would generally be slower than a server-to-server request.

TheΒ remix vs next blog postΒ (built on top of the Storefront API) did a great job illustrating the benefits of the server-to-server requests.

"The user's connection to the cloud is always going to be slower than your server's, probably best to keep the data fetching there".

It allows you to have requests from the client-side and use it during cart interactions though, just not with useShopQuery.

The data does need to get to the client eventually but with server and client components we can optimize that experience by leveraging a faster internet connection, per request caching. It delivers a smaller bundle size to the client browser. The performance wins in this area become more dramatic the slower the connection of the user interacting with the site is.

Do you want to learn more about this brand-new technology? Check out myΒ Shopify Hydrogen Course.

Top comments (0)

🌱 DEV runs on 100% open source code known as Forem.

Β 
Contribute to the codebase or learn how to host your own.