Are you a Shopify app, store, or theme developer? If so, then your whole world is about to change for the better. Shopify recently released Hydrogen, their new framework for building storefronts.
Bear in mind; it’s a developer preview. Hydrogen is still a work in progress.
If you’re a developer, you owe it to yourself to check out Hydrogen. Since it’s still in development, you get the chance to provide invaluable feedback.
So if you want to learn more about Hydrogen, you’re in the right place. We’re here to take an in-depth look at Shopify’s Hydrogen framework. We’ll break down all its core components and key features. That way, you can determine if it’s a good fit for you or if you’d like to see any changes. Read on to learn more about this exciting React-based framework.
Start Building with Hydrogen
The Hydrogen developer preview is now live, and anyone is free to check it out. It’s a React-based framework used for front-end development. You’ll be able to build custom storefronts faster than ever before.
The team at Shopify believes that the future of e-commerce is fast, personal, and dynamic.
These three traits were at the top of their minds when developing Hydrogen.
In the past, developers had to make a sacrificial trade-off. They had to choose technology stacks that either favored speed or dynamism. There wasn’t a way to build a truly dynamic experience without giving up some speed until now.
Hydrogen allows you to build personalized, dynamic storefronts at lightning-fast speeds. Now you can finally enjoy the best of both worlds when developing front-facing stores.
There’s also a lot of emphasis on fun. To the team at Shopify, web development should be a blast above all else. After all, if you aren’t enjoying coding or developing, what’s the point? If designing and writing code are fun, you’ll want to do more of it and push your creativity to its limits. That was Shopify’s goal when creating Hydrogen.
With Hydrogen, the goal was to merge:
- E-commerce
- Superior user experiences
- Quick and efficient developer experiences
By combining these components, Hydrogen packs a serious punch. Now developers can create dynamic storefronts without sacrificing performance. With the implementation of widespread 5G around the corner, the team at Shopify knew speed was a must.
As of November 8th, 2021, the Hydrogen Developer Preview is live. It’s fully open-source, and developers are free to give it a try.
The team at Shopify wants your feedback. That way, they can develop the absolute best version of Hydrogen that they can. It’s undoubtedly going to become the way of the future for e-commerce development, so it’s wise to get on the hype train now. You also get the unique chance to let the folks at Shopify know your two cents about their new framework.
Hydrogen has a quickstart environment, so getting started is a breeze. The goal is to speed up the process without sacrificing complexity or dynamics. Hydrogen also has a robust set of tools specifically optimized for e-commerce. These include:
- Streaming server-side rendering. Powered by React’s Suspense, this rendering tool allows for lightning-fast first renders.
- React server components. These provide efficient post-render status updates at the component level. The team at Shopify has been hard at work collaborating with the React core team. The results are phenomenal, and the tech stack works better now more than ever with Shopify.
- Built-in server and client data fetching primitives. Smart cache defaults round out the ability to fetch data from both servers and clients.
- Subrequest cache policies and flexible pages. These will contribute to edge delivery and provide power dynamics.
As you can see, there are quite a few robust new tools coming out with Hydrogen. They all exist to enhance speed, personalization, and dynamism. Stay tuned for an in-depth look at Shopify’s Hydrogen framework and each of its components.
Hydrogen and Streaming Server-Side Rendering
Think for a second about a merchant storefront with lots of personalized buyer data:
- Localized descriptions and prices for each product
- A complete list of recommended products from purchase and navigation history
- A custom call to action
- Promotional banners
- Multiple A/B tests
Traditionally, you would render an empty product page skeleton. It would use post-renders and browser-initiated fetches to generate all the content. As you can imagine, all these roundtrips add up to a pretty awful user experience. Pictures lag and take a while to load, and the whole experience suffers as a result.
Sure, the store has a lot of fancy personalized content, but the merchant had to sacrifice speed.
Slow page loading times will destroy your UX. The last thing that you want is to lose potential customers due to poor loading times. The same is true if your page is laggy or has lots of bugs. If your page constantly has to fetch data from different sources, these problems are bound to happen.
The standard client-side rendering method results in a delayed display. In other words, it takes too long to load critical page content. An alternative here is to use server-side rendering instead of client-side.
- Server-side rendering involves fetching the data on the server and then returning it in the response.
That drastically eliminates RTTs and paves the way for contentful paints to fire close together. Yet, it comes at the cost of a slow time-to-first-byte. Why? It’s because the server is blocked on the data. Streaming server-side rendering comes into the picture to work around this.
Hydrogen uses the brand-new React 18 alpha streaming SSR API that Suspense powers. By using it, they were able to unlock some critical performance perks that include:
- A Fast TTFB. In standard SSR, the TTFB remains blocked until it resolves all data queries. In streaming SSR, the browser streams the HTML shell without blocking the data. That gets rid of the slow time-to-first-byte.
- Progressive Hydration. As the system resolves these server-side data fetches, it’s streamed in the HTML response. From there, the React runtime hydrates the state of each component. It’s able to do so without the use of extra client round trips. It also doesn’t have to block on rendering the entire component tree. What’s that mean? It means that individual components can load at custom rates. As the page gets constructed and streamed by the browser, all the components have independent loading times.
Combining these two perks is the perfect fit for dynamic, high-performance e-commerce. You’ll effectively eliminate the client-side waterfall that is CSR. Now you can use SSR without sacrificing your time-to-first-byte.
React Server Components
The team at Shopify has been working very closely with the core team at React. Server components are essential building blocks for high-performance stores. With React’s server components, you can separate your client and server logic and components. You’ll enjoy a host of downstream benefits as a result:
- Server-only code that will have zero impact on bundle size. It reduces bundle sizes as a result.
- Server-side access to private and customer server-side data sources.
- Seamless integration for server+client components. There are also well-defined protocols.
- Progressive hydration and streaming server-side rendering.
- Where appropriate, server and client code sharing is available.
- Component-level updates and subtree updates that will preserve your client state.
There’s a bit of a learning curve involved with React’s server components. That’s because they’re brand-new building blocks, even for those very familiar with the tech stack. Yet, they provide many perks for those willing to take a tiny amount of time to get acquainted with them. You’ll enjoy numerous architectural and performance enhancements from using them.
With these server components, you can build apps that span both the server and the client. Now you can combine the interactivity of a client-side app with the stellar performance of server rendering. With Hydrogen, you can have your coding cake and eat it too.
Enhanced Caching, Colocation, and Data Fetching
If you want fast server-side responses, you need third-party and first-party data access. If you use Oxygen, a Shopify-hosted V8 worker runtime, the server components query the store API with localhost speed. In other words, your store data becomes colocated and is mere milliseconds away. If you’re fetching third-party data, it uses intelligent cache defaults and configurable caching methods. These include:
- A smart default caching policy: cache TTLs and key generation.
- The ability to customize and override cache keys, caching policies, and TTLs.
- Built-in support features for asynchronous data refresh. It does so via stale-while-revalidate.
The Best of Edge and Dynamic Serving
While Hydrogen makes excellent use of server-side data fetching, that’s not all it can do. In some cases, it’s good practice to defer non-critical content from the client side. You can use IntersectionObserver to see when content is about to load on the screen. You can use regular React patterns and browser APIs to load your non-critical content.
Shopify Theme development with Coding Phase
If you are interested in a great course to learn liquid try out Shopify Theme Development by CodingPhase. Codingphase by Joe Santos teaches you all about the liquid programming language as you code alongside him to create a theme. I highly recommend this course as it’s easy to follow and has tons of useful information. We recommend subscribing to the yearly bundle so you can have access to both the Shopify theme development courses and Shopify app development courses, while also getting access to a huge collection of programming courses you can take. You can also buy courses individually but you will end up spending more money than if you bout the yearly and got access to all of the Codingphase courses. The yearly subscription can be paid in 2 payments spanning 6 months. If you want to get access to the Shopify theme development course and a huge collection of courses check out Codingphase at this link.
Final Takeaways
Now that you’ve seen an in-depth look at Shopify’s Hydrogen framework, what do you think? It’s a revolutionary new type of customer-facing storefront builder. If you’re a Shopify developer, then you owe it to yourself to check it out. It’s still in the preview phase, which is a plus. While you try it out, take notes so that you can provide valuable feedback for the teams at Shopify and React.
If youd be interested in reading our article on a guide to Shopify Online store 2.0 visit this link here.
