Incremental adoption from Online Store

[sdn90]

Hey all!

Saw on the roadmap that there's something in the works for incremental adoption from Online Store. This sounds really compelling for our use case and wanted to know if I could get more info or provide any feedback.

Our main site is a Shopify store but we serve content such as articles, case studies, landing pages through the App Proxy. The content is built using a Next.js app and we utilize the App Proxy Liquid rendering pretty heavily.

The end result is

• We utilize the layout from our Shopify theme
• Our content is served under the same domain
• Our content renders product data using Liquid strings (We use static generation - Server components and ISR wasn't around when we starting building it)

We've run into a lot of pain points using this approach and I've been thinking about switching over the Next.js app to Hydrogen and serving it through the App Proxy. Migrating our entire site to Hydrogen isn't very appealing as the theme's codebase is pretty big.

Thanks!

[frandiox]

Hi!

We still need to explore ways for incremental adoption but what we have right now is the ability to use Hydrogen as a proxy to Liquid.
The idea is that you use Hydrogen with a "catch all" server component that simply forwards the requests to the Online Store, where Liquid runs and returns HTML. With this, you can start migrating route by route to using React, and keep some routes proxied to the Online Store if that works for you.

In your specific use case, it seems that what you want is having your general layout and pages in Liquid, and then inject content in some part of the document at the Hydrogen level. This might also be possible with the previous approach. Once you get the HTML from Liquid in the Hydrogen handler, that string can be modified to add your custom content. For example, you could use the HTMLRewriter API if you are deploying to Oxygen or Cloudflare Workers -- currently this API is not available in development but we should fix that.

[tylerhellner]

Hey @juanpprieto . I was just curious if there was any more news on this feature or when we could expect updates? Now that Black Friday is over, my bosses are looking for roadmaps for the next year so any news would be good news for me!

[blittle]

@tylerhellner Just a few weeks ago we shipped a small helper function for making proxied requests easier. This helper function only works well when your Hydrogen app is deployed to Oxygen, because online store is going to think Hydrogen is a bot, and throttle the request. The helper function mitigates that with some unique signed headers provided on Oxygen.

It just so happens that today I've been working on a better proxy implementation in Hydrogen 2 built on remix. We are super excited to share more details, hopefully with a dev preview very soon!

[heiye9]

@blittle If I use a proxy, how do I solve the problem of cart data interoperability between the online store and the hydrogen channel?

[FriedRiceNoodles]

@blittle If I use a proxy, how do I solve the problem of cart data interoperability between the online store and the hydrogen channel?

Same question here!

[LuLue7775]

Hi, does anyone have the helper function to make proxied request on Hydrogen 2?
Also how do we solve the issue mentioned above, the cart data interoperability between the online store and the hydrogen channel?