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.
Shopify Docs
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.
